Div Höhe auf Fensterhöhe setzen - css, html5, css3, twitter-bootstrap, height

Ich verwende den ASP.NET-Vorlage und der Versuch, meinen Inhalt so einzustellen, dass er die volle Höhe meines Fensters einnimmt, aber ich kann es nicht erreichen. Ich habe einen Container und zwei gleichgeordnete divs darin. Wenn das untere div auf height 100% gesetzt wird, wird der Container überlaufen .

Ich benutze auch Bootstrap.

Ich kann den Höhenprozentsatz nur auf einen niedrigeren Wert senken, aber gibt es keinen besseren Weg? Ich habe einen Screenshot und eine Geige hinzugefügt: http://jsfiddle.net/ob1g0752/

HTML:

<div style="height:100%; width:100%; border-style:solid; border-width:2px; position:absolute;">
<div style="margin:5px; width:100%; border-style:solid; border-width:2px; border-color:pink;">
test
</div>
<div style="height:100%;width:100%; border-style:solid; border-width:2px; margin:5px; border-color:yellow;">
test
</div>
</div>
<footer style="display:block;">footer</footer>

CSS:

body
{
min-height:100%;
min-width:100%;
}
html
{
height:100%;
}

BEARBEITEN Entschuldigung, ich habe eine alte Version der Geige veröffentlicht, dies ist die aktualisierte Version. Beobachten Sie, wie der gelbe Rand den Container überläuft. http://jsfiddle.net/ob1g0752/4/

Antworten:

Das Entfernen des Randes und der Auffüllung hilft, Sie können auch hinzufügen box-sizing: border-box; Um Rahmen und Auffüllung beim Einstellen der Breite zu berücksichtigen. Ich bin auch nicht sicher, ob Sie Ihre Fußzeile am unteren Rand der Seite kleben lassen möchten, aber ich habe das zusammen mit den anderen Korrekturen in dieser Geige getan:

http://jsfiddle.net/ob1g0752/2/

Sie müssen hinzufügen

margin: 0px;
padding: 0px;

zu html und body.

Auch dein divs haben einen 2-Pixel-Rahmen und eine Breite von 100%. Dadurch wird eine horizontale Bildlaufleiste erzwungen.