Javascript 没有固定高度的滚动div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5564455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrolling div without fixed height
提问by Urbycoz
I need to build a dynamically-resizing scrolling div.
我需要构建一个动态调整大小的滚动 div。
The div should dynamically resize to fit the screen. But if the content doesn't fit on the screen, it should display a scrollbar. So the browser's own scrollbar should never need to become active.
div 应该动态调整大小以适应屏幕。但是如果内容不适合屏幕，它应该显示一个滚动条。所以浏览器自己的滚动条永远不需要激活。
I can get a scrollbar to appear in the div by placing another div inside it and using overflow: auto.
我可以通过在其中放置另一个 div 并使用overflow: auto.
<div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" >
<div id="gridcontent" style="height:100%">
<!--Put loads of text in here-->
</div>
</div>
The trouble is that this only works when the first div has a fixed height. I had hoped I could just set the first div to height:100%, but sadly not- this property appears to get ignored, and the scrollbar just doesn't appear.
问题是这仅在第一个 div 具有固定高度时才有效。我曾希望我可以将第一个 div 设置为height:100%，但遗憾的是没有 - 这个属性似乎被忽略了，并且滚动条没有出现。
I have tried putting the divs in a table with height:100%, and setting the first div to height:auto, hoping it might take its height from its parent. But the div still seems to ignore the height property.
我曾尝试将 div 放在一个表中height:100%，并将第一个 div 设置为height:auto，希望它可以从其父级获得它的高度。但是 div 似乎仍然忽略了 height 属性。
So my question is: Can this be done using just html, or- failing that- javascript?
所以我的问题是：这可以只使用 html 来完成，或者 - 失败 - javascript？
回答by kapa
You could stretch the div using absolute positioning. This way it will always take the size of the browser window (or the closest positioned ancestor).
您可以使用绝对定位来拉伸 div。这样，它将始终采用浏览器窗口（或最近定位的祖先）的大小。
Given this HTML:
鉴于此 HTML：
<div id="gridcontainer"></div>
the CSS should be something like:
CSS 应该是这样的：
#gridcontainer {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}
回答by Creaforge
Since IE9 you can use viewport units.
从 IE9 开始，您可以使用视口单位。
Let's say that the height of your container is dynamic, unless its size is greater than the window height. In that case we stop the expansion & activate the scroll.
假设容器的高度是动态的，除非它的大小大于窗口高度。在这种情况下，我们停止扩展并激活滚动。
#container{
background: #eaeaea;
max-height: 100vh;
overflow-y: scroll;
}
div{
outline: 1px solid orange;
width: 200px;
height: 200px;
}<div id='container'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>回答by Shashank Shekhar
If you are trying to make element fit the screen then you can set the value of hight and width of the element to 100%.
如果您要使元素适合屏幕，则可以将元素的高度和宽度值设置为 100%。
You will also need to set the height of html and body
您还需要设置 html 和 body 的高度
html, body {height: 100%}
#gridcontaine {
height: 100%;
width: 100%;
}
