0

像许多其他寻找 CSS 高度解决方案的人一样，这些年来我时断时续地遇到过这个问题。一个简单的 jsfiddle 值一千字：

http://jsfiddle.net/7dcjn/1/

我了解如何在 html 和 body 上使用 height: 100% 来部分实现我想做的事情。我还刚刚发现了 CSS3 box-sizing 属性，它再次解决了一些问题。

但是，我仍然有一个问题，如果您有一个高度为 50px 的顶部标题 div1，然后有一个低于 100% 高度的 div2，浏览器使 div2 成为视口高度的 100%，这当然会使 div2 运行体外。请参阅上面的 jsfiddle 或下面的代码。

<div id="MainBody">
    <div id="TopHeader">My Top Header</div>
    <div id="ContentWrapper">
    How does one get this blue box to extend only to the bottom of the viewport/browser window?  In other words, the blue border needs to extend right up to the green box.
    </div>
</div>

html, body {margin: 0; padding: 0; border: 2px solid #00CC00;}
html, body, #MainBody, #ContentWrapper {height: 100%; min-height: 100%; box-sizing:border-box; -moz-box-sizing:border-box;}
#MainBody {margin: 0; padding: 0; border: 2px solid #CC0000;}
#TopHeader {height: 50px; background-color: #303030; padding: 10px; color: #FFFFFF;}
#ContentWrapper {margin: 0; padding: 20px 20px 0 20px; margin: 10px 10px 0 10px; border: 2px solid #0000CC;}

有什么建议么？谢谢！

4

2 回答 2

1

我认为这是最接近实际将框安装到剩余空间的方法，即让框填满整个空间并将标题浮动到其顶部，以便将内容推开。

这是一个更好的解决方案，calc()因为不需要设置标题的大小才能使其工作。

所以你需要做一些修改，TopHeader需要float:left;width:100%;和需要改变的边距，ContentWrapper这样它就不会被推到底部。

见我的JSfiddle

要在内容开始时调整标题下方的间距，您需要调整 hte 底部边距TopHeader

这是一个例子

于 2013-09-06T16:21:17.957 回答
0 
Here's your solution bro:

The first styling of the css of the "contentWrapper" was false.

http://jsfiddle.net/xbV9A/
于 2013-09-06T14:42:14.100 回答