如何将 div 高度扩展到窗口允许的高度？

Question

我有一个公共页面structure，带有固定的页眉和粘性页脚。但我不知道如何扩展 div 高度以填充整个窗口区域。

HTML

<header>
    header header header
</header>

<div id="page">
    <div id="left">side bar side bar</div>
    <div id="right">
    <p>I want to draw the brown dashed line all the way down to the footer even when the #right content is too little to fill the window.</p>
    <p>I know that I have to set height 100% on #right so that it stretches to fill the green box. But, the green box itself does not stretch to the bottom despite height 100% because the yellow box does not have explicit height defined.</p>
    <p>What can I do?</p>
    </div>
</div>

<footer>
    footer footer footer
</footer>

CSS

html, body, foot, header, div { padding: 0; margin: 0; box-sizing: border-box; }
p { margin-top: 0 }
html { height: 100%; min-height: 100%; }
header { position: fixed; background-color: red; height: 50px; width: 100%; }
footer { position: absolute; bottom: 0; width: 100%; background-color: cyan; }
body {
    position:relative; /* container for footer */
    border: 5px solid yellow;
    min-height: 100%; /* not explicitly setting height to allow footer to be pushed downwards */
}
#page {
    padding: 60px 0 20px 0;
    border: 5px solid green;
    height: 100%; /* not working: how to extend page all the way to the bottom, min-height = fill the window? */
}
#page:after { content:""; display: block; clear:both; }
#left { float: left; width: 100px; }
#right {
    margin-left: 100px;
    padding-left: 10px;
    /* objective: to create vertical divider between #right and #left that extends to the footer */
    height: 100%;
    border-left: 5px dashed brown;
}

Answer 1

好的，高度 100% 不起作用的原因是因为 body 根本没有高度，它的高度取决于 body 内的项目。

有一个解决方法

将以下内容应用于您的样式。

html, html body {
    height: 100%;
}
#page { /* If #page is a lvl 1 child of body, this should work */
    height: 100%;
}

这里是 JSFiddle

http://jsfiddle.net/wetjyLy3/1/

Answer 2

您可以使用绝对定位使 div 始终与窗口的顶部和底部保持 0px 的距离。您可能需要使用这些值，但这样的事情应该可以工作：

#left { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; }
#right { position: absolute; top: 0; bottom: 0; right: 0; width: 80%; }

编辑：Here's a fiddle，它显示了它是如何工作的。