2010-12-17 6 views
1

Ich arbeite an Seiten, deren Größe sich je nach Inhalt ändert. Das Problem dabei ist, dass in diesem Bereich nicht genügend Inhalte vorhanden sind. Der Bereich ist nicht groß genug, um der Höhe einer angrenzenden Seitenleiste zu entsprechen. Ich habe mich gefragt, ob es eine Möglichkeit gibt, eine Eigenschaft mit minimaler Höhe zuzuweisen, so dass, wenn nicht genug Inhalt vorhanden ist, dieser standardmäßig auf diese Höhe eingestellt wird. Die Höhe dieser Seitenleiste variiert auch von Seite zu Seite. Daher möchte ich auch wissen, ob es möglich ist, sie auf die Höhe dieses Elements anstatt auf einen absoluten Wert zu beziehen.HTML-Mindestattribute

Antwort

2

Erstens, Sie sollten folgendes wissen:

  • Inhalt gehört in HTML (Modell)
  • Styles gehören in CSS (View)
  • Interaktionen gehören in JavaScript (Controller)

CSS kann innerhalb von HTML in style Attribute platziert werden, obwohl es vermieden werden sollte, wenn es nicht notwendig ist.

Die CSS-Eigenschaft min-height funktioniert, was Sie suchen, obwohl nicht in IE6 funktioniert. Es gibt einen Fix für IE6, geht es wie folgt

.yourstyle 
{ 
    height: auto !important; 
    height: 500px; 
    min-height: 500px; 
} 

Stellen Sie sicher, Ihre height und min-height Werte identisch sind.

+0

Gibt es sowieso innerhalb CSS, anstatt einen absoluten Wert für diese Höhe zu verwenden, könnte ich sagen, den Höhenwert eines anderen Elements innerhalb der Seite zu verwenden . Oder muss das mit einem Skript gemacht werden? – Brendan

+1

@ Brendan Ich habe dies nicht getestet, aber ich nehme an, Prozentwerte würden für das Elternteil funktionieren (dh Höhe: 100%; Mindesthöhe: 100%). Sie können kein anderes Element auf der Seite auswählen. Von den Geräuschen her, suchen Sie nur nach einer Möglichkeit, Spalten gleicher Höhe in einem mehrspaltigen Layout zu haben. Die schnelle Lösung besteht darin, den Eltern der Spalten den Hintergrund zu geben, der auf der Seite angezeigt werden soll. – zzzzBov

+0

Hier ist ein Link zu einem Beispiel für eine Seite innerhalb der Website, die das tut, was ich versuche zu erklären: http://www.triptac.org/HelpDesk/TAG/Default.html Der Hauptinhaltsbereich der Seite ist nicht so groß wie die Sidebar daneben. Die Seitenleiste und dieser Inhaltsbereich haben beide dasselbe Elternelement. Allerdings, wenn ich 100% für den Wert von min-height verwende, funktioniert es nicht, obwohl von allem, was ich gesehen habe, es sollte. Vielleicht könntest du es dir anschauen und sehen, ob du irgendwelche Ideen hast? – Brendan

3

In CSS2 kompatiblen Browsern Sie min-height verwenden können: http://www.w3.org/TR/CSS2/visudet.html#min-max-heights

Obwohl für nicht-kompatible Browser (ähem IE6) finden Sie eine andere Art und Weise zu implementieren, sie finden müssen.

Sie können CSS-Eigenschaft Kompatibilität hier sehen: http://www.quirksmode.org/css/contents.html

+0

Einige dieser Seiten Benutzer könnte IE6 verwenden und ich möchte es kompatibel machen. Gibt es eine Möglichkeit, dies innerhalb des tatsächlichen HTML-Codes zu tun? – Brendan

+0

@Brendan Es gibt Möglichkeiten, IE6 zu verhalten ... zum Beispiel: http://code.google.com/p/ie7-js/ –

+1

Für Elemente, die 'overflow: visible' haben, behandelt IE6' height' als 'min-height' (ein anderer Fehler). Stellen Sie "height" in einem IE6-only-Stylesheet ein (z. B. hinter einem bedingten Kommentar). – Quentin