带有内部div滚动的窗口的100％高度 [英] 100% height of window with inner div scrolling
问题描述
在过去的几个小时中，我一直在努力地拼搏，以求出一种实现Web应用程序所需布局的方法.我的头很痛.
I've been banging my head against the wall really hard for the past couple of hours to figure out a way to achieve the layout I'd like for a webapp. And my head hurts.
基本上，我需要的是完整的窗口布局(完整的宽度，完整的高度，永远不会滚动).应该使用两个不同的水平框(您可以将它们视为行)覆盖100％的宽度和高度.
Basically what I need is to have a full window layout (full width, full height, no scrolling - ever). 100% of width and height should be covered using two different horizontal boxes (you can see them as rows).
- 第一个盒子/行的高度可以变化(将其作为页面的页眉)
- 下面的那个应该占据空间的剩余部分，而不会超出窗口的100％，因此永远不会显示滚动条.
现在比较棘手的是，在第二个方框/行中，我希望内容通过内部垂直滚动显示.想象第二个盒子/行包含一个项目列表，如果项目很少，则盒子/行的底部应该在内容之后停止.在有很多物品的情况下，盒子/行应该向右扩展，直到达到窗口高度的100％(基本上是窗口的100％-第一个盒子/行所占据的高度).通过在第二个框/行中滚动，其余内容应可见.
Now what's a bit more tricky is that within the second box/row, I want content to be displayed with an inner vertical scrolling. Imagine the second box/row contains a list of items, in case of very few items, the bottom part of the box/row should stop right after the content. In case of many items, the box/row should expand right until it hits 100% of the window height (which is basically 100% of the windows - the height occupied by the first box/row). The rest of the content should be visible through scrolling within the second box/row.
我有道理吗?
关于代码，我不想复制/粘贴粘贴在一起的灾难性内容，因为我宁愿从空白页开始.
Regarding the code, I'm not going to copy/paste the desastrous thing I've pulled together because I'd rather start from a blank page.
这是我尝试过的:
<html>
<body>
<div id="wrapper">
<div class="box">Header</div>
<div class="box">Content <ul><li>...</li>(x1000)</ul></div>
</div>
</body>
</html>
之所以使用框"类，是因为两个框/行在背景，边距，阴影等方面都应显示相同的外观.
The reason why I use a "box" class is because both boxes/rows should show the same appearence in terms of backgrounds, margins, shadows, etc.
html, body {
height: 100%;
}
#wrapper {
position: absolute;
height: 100%;
width: 100%;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
对于其他情况，我只是尝试过(到目前为止失败)通过添加危险的overflow: hidden; overflow-y: scroll; height: 100%; max-height: 100%; min-height: 100%;等来操纵.box元素.
For the rest, I've just tried (and failed so far) to manipulate the .box elements by adding hazardously overflow: hidden; overflow-y: scroll; height: 100%; max-height: 100%; min-height: 100%; etc.
提前感谢您的帮助！
推荐答案
问题是因为CSS长期以来一直不愿意将高度自动调整为可用空间.
The problem is because CSS has long been crappy about auto-adjusting height to available space.
解决方案是使用设置为position: absolute且与视口的顶部，左侧，右侧和底部边缘相关联的包装器.这样，浏览器将自动调整元素的高度，如果您在height: 100%中包含内容div，它将始终填充该空间.
The solution is to use a wrapper that's set to position: absolute and tied to the top, left, right, and bottom edges of the viewport. With this, the browser will auto adjust the height of the element, and if you have a content div inside with height: 100% it'll always fill that space.
在包装器上设置overflow-y: scroll将使内容滚动(如果内容过长):
Setting overflow-y: scroll on the wrapper will allow the content to scroll if it becomes too long:
http://codepen.io/helion3/pen/jwbcx
网站标题通常高度不可变.如果您使用百分比定义网站标题，并且不需要支持IE< 8，则可以通过box-sizing: border-box安全地使用百分比来实现相同的目的.
Site headers are usually not variable in height. If you're defining the site header using percentages, and if you don't need to support IE<8 then you can use percentages safely with box-sizing: border-box to achieve the same.
这篇关于带有内部div滚动的窗口的100％高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
