Nehmen wir an, ich habe 2 Divs.
Ich habe alles ausprobiert, was ich weiß: Wenn ich es auf 100% einstelle, nimmt es die gesamte Seite ein, also 100px zu viel. Wenn ich es versuche, ohne Einstellung einer Höhe, bekomme ich nur so viel wie ich in schreiben.
Ich würde wahrscheinlich etwas Javascript verwenden, um dieses Problem zu lösen. Es ist wahrscheinlich die einzige gute Möglichkeit, dieses Problem zu lösen, wenn man die vielen Unstimmigkeiten zwischen dem IE und dem Rest der Browsergemeinschaft bedenkt. Verwenden Sie ein Framework wie JQuery, um die Höhe des zweiten div automatisch einzustellen. Auf diese Weise können Sie sicher sein, dass der gleiche Effekt in allen Browsern konsistent ist, da JQuery browserübergreifend kompatibel ist.
Benutzen Sie position: absolute gibt es einen Trick, wenn Sie Folgendes angeben top y bottom zur gleichen Zeit, was im Grunde genommen eine Streckung der div:
<!DOCTYPE html>
<html>
<head>
<style>
body { height: 100%; margin: 0; }
#felso { height: 100px; }
#also { position: absolute; top: 102px; bottom: 0; left: 0; right: 0; }
</style>
</head>
<body>
<div id="felso"></div>
<div id="also"></div>
</body>
</html>Passen Sie es an Ihre speziellen Bedürfnisse an. Ich schrieb 102px für top wegen der Ränder, die eine zusätzliche 1px * 2 auf die Höhe von #felso .
Sie dehnt sich tatsächlich auf die Größe des Ansichtsfensters aus, da sie gleichzeitig oben und unten angegeben wird. Welchen Browser haben Sie ausprobiert? Bei mir funktioniert es in IE8, FF und Chrome.
Stimmt, das tut es. Mein Problem war mit dem doctype, die ich nicht kopieren und zwang den Browser in quirks Modus (IE8). Wie auch immer, scheint Ihre Lösung die eleganteste (besser als Tabelle zumindest). Lustige Punkt ist, dass FF im Quirks-Modus tut es richtig, wenn nur ich versucht, dass :)
Ich glaube nicht, dass dies in reinem CSS möglich ist, weil Sie nicht 100% - 100px tun können. Sie können eine Tabelle mit einer Höhe von 100% und zwei Zeilen verwenden. Dann ist die erste Zeile 100px und die zweite nimmt den Rest der Höhe.
<table style="height:100%;">
<tr>
<td style="height:100px;">instead of div 1, is 100px</td>
</tr>
<tr>
<td>instead of div 2, takes the rest of the height</td>
</tr>
</table>
Ich hasse Tische... Tische sind soooo alt! Ich weiß, dass es mit Tabellen funktioniert, aber mein komplettes Design (und das ist nicht einfach) basiert auf divs...
Haha, ich stimme zu, dass Tabellen nicht ideal sind, aber unter dem Gesichtspunkt der Wartungsfreundlichkeit: Wenn man die Wahl hat zwischen einer einfachen Tabelle oder einem komplexen verschachtelten Div mit seltsamen CSS und Javascript (es funktioniert einfach nicht ohne weiteres), was würde man wählen? Jeder versteht eine einfache, archaische Tabelle :)
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
