Wie man div 100% Höhe relativ zum parent?
Klebte ich mit etwas wie folgt Aussehen. Ich brauche, um rechts-top div 100% Höhe (in seiner bgcolor deckt die volle Höhe der Haupt-div).
<body>
<div id="main" style="width: 800px; margin: auto; text-align: left; border: 1px solid #628221; padding: 2px; background-color: #fff;">
<div id="left" style="float: left; width: 600px; background-color: #A7C864;">
<div id="left-top">left-top</div>
<div id="left-bottom">left-bottom</div>
</div>
<div id="right" style="float: right; width: 200px; background-color: #C7E48E;">
<div id="right-top">right-top</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
Beispiel hier:
http://marioosh.net/lay1.html
Mit Hilfe der Tabelle ist es einfach:
http://marioosh.net/lay2.html
überprüfen Sie diese heraus. Ich bin sicher, Sie wird helfen. question1 question2
Auch der Versuch dies deutet darauf hin, dass Sie nicht verstehen können, was div ' s sind alle über. Wenn Sie möchten, das zu tun, benutzen Sie die Tabelle, nicht die div. Wenn Sie die div-main die Höhe, div Links in der Höhe, dann können Sie div rechts 100%, aber das ist irgendwie albern, da kann man natürlich dann an div die richtige Höhe.
Also, sagen Sie mir, was für den div sind ?
Auch der Versuch dies deutet darauf hin, dass Sie nicht verstehen können, was div ' s sind alle über. Wenn Sie möchten, das zu tun, benutzen Sie die Tabelle, nicht die div. Wenn Sie die div-main die Höhe, div Links in der Höhe, dann können Sie div rechts 100%, aber das ist irgendwie albern, da kann man natürlich dann an div die richtige Höhe.
Also, sagen Sie mir, was für den div sind ?
InformationsquelleAutor marioosh | 2011-01-21
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich kann sein Missverständnis der Frage (Ihr link zu den Tisch-basiert Beispiel nicht funktioniert), aber es klingt wie Sie versuchen, erstellen Sie zwei Spalten mit gleicher Höhe. Es gibt mehrere Techniken, die Sie verwenden können, hier sind drei von Ihnen:
Können Sie jede
DIV
eine große untere Polsterung, und eine ebenso große, aber im negativen, unteren Rand.Diese Lösung ist nicht ohne Probleme, wenn Sie versuchen, einen link zu einem element in einer der Spalten (z.B. Sie haben ein element in einer der Spalten mit
id=foo
und Sie link zumypage.html#foo
), dann wird das layout brechen. Es ist auch schwer zu fügen unteren Grenzen dieser Technik.Vollständige Beispiel von Natalie Downe: http://natbat.net/code/clientside/css/equalColumnsDemo/10.html
Können Sie geben eine der Spalten einen negativen rechten margin, und der andere einen sehr breiten linken Rand.
Mehr Informationen auf Smashing Magazine: http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
Können Sie fake it, indem
#main
ein Hintergrundbild enthält, der hintergrund für beide Spalten. Diese Technik ist bekannt als "Faux Columns" und ist nützlich, wenn Sie möchten komplexe Hintergründe, oder eine Dekorative Grenze zwischen den Spalten.Mehr Informationen auf A List Apart: http://www.alistapart.com/articles/fauxcolumns/
Als ein Kommentator auf die Frage hingewiesen, Sie können auch eine Tabelle verwenden. Jedoch, wenn Sie die Anzeige von tabellarischen Daten
TABLE
nicht das entsprechende HTML-element.InformationsquelleAutor georgebrock
Müssen Sie die Höhe des übergeordneten elements zu aktivieren Höhe von 100%. Wenn Sie sowohl die Höhe als 100% sollten Sie sich der Wirkung, die Sie suchen
InformationsquelleAutor James Lelyveld