javascript 如何在不指定高度的情况下仅将垂直滚动条添加到一个 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12187815/
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
How to add vertical scroll bar to one div only without specifying height?
提问by Radek
Can I add a scroll bar to a div when needed but without specifying any heighteither for the div itself or for a container that this div must be in?
我可以在需要时向 div 添加滚动条，但不为 div 本身或此 div 必须位于的容器指定任何高度吗？
The div is the very botton element on the page and I want user to be able to resize the browser window. So the scroll bar would appear when the "data" that dynamically add to the div reaches the botton of the page.
div 是页面上的底部元素，我希望用户能够调整浏览器窗口的大小。所以当动态添加到 div 的“数据”到达页面底部时，滚动条就会出现。
My page got contains only one table and second row of the table is below code.
我的页面只包含一张表格，表格的第二行在代码下方。
<table border="0">
<tr>
<td><button type="button" onclick="$('#info').text('')" > clear info area </button></td>
</tr>
<tr class="tr_info">
<td><div id='info'></div></td>
</tr>
</table>
I tried overflow-y: scroll;to the div but it added scroll bar to the whole window not the div.
我尝试overflow-y: scroll;了 div，但它向整个窗口而不是 div 添加了滚动条。
回答by Wex
html, body { height: 100%; }
div { height: 100%; overflow: auto; }
http://jsfiddle.net/Wexcode/xMdPA/
http://jsfiddle.net/Wexcode/xMdPA/
Less text:http://jsfiddle.net/Wexcode/xMdPA/1/
更少的文字：http : //jsfiddle.net/Wexcode/xMdPA/1/
You can also get the text to stay at the bottom of the page: http://jsfiddle.net/Wexcode/xMdPA/2/
你也可以让文本留在页面底部：http: //jsfiddle.net/Wexcode/xMdPA/2/
回答by sabithpocker
Fiddle http://jsfiddle.net/RSh9H/2/show/
小提琴http://jsfiddle.net/RSh9H/2/show/
Corrected Fiddle : http://jsfiddle.net/RSh9H/8/show/
更正小提琴：http: //jsfiddle.net/RSh9H/8/show/
jQuery:
jQuery：
$(window).on('load resize',function(){
var heightOfWindow = $(window).height();
var totalHeightOfContents = $(document).height();
if(heightOfWindow <= totalHeightOfContents){
var heightExcludingInfo = $('table#main').height() - $('#info').height();
var availableHeightForInfo = heightOfWindow - heightExcludingInfo;
$('#info').height(availableHeightForInfo);
}
else{
$('#info').css({height:'auto'});
}
});
回答by d-_-b
going off @zenkaty 's post,
离开@zenkaty 的帖子，
in the style for that element, put overflow-y:auto, this way when it has an overflow it will show a scroller, but if not it will have no scrollbar.
在该元素的样式中， put overflow-y:auto，这样当它溢出时，它会显示一个滚动条，但如果没有，它将没有滚动条。
(as opposed to overflow-y:scrollwhich will alwaysshow a scroll bar.
（而不是overflow-y:scroll将始终显示滚动条。
Edit:
编辑：
As Sabithpocker pointed out, if you have no height, as far as I know, the table will expand to show all text if there is too much. If you set a height, thenyou can use overflow-y:auto. Please see http://jsfiddle.net/rZV5u/for example.
正如 Sabithpocker 指出的那样，如果你没有高度，据我所知，如果有太多的话，表格会扩展以显示所有文本。如果设置了高度，则可以使用overflow-y:auto. 例如，请参见http://jsfiddle.net/rZV5u/。
Hope this helps!
希望这可以帮助！
回答by zenkaty
Just put this on your div - if you add it to the body/html, then the whole window will scroll, obviously.
把它放在你的 div 上——如果你把它添加到 body/html 中，那么整个窗口显然会滚动。
div {
overflow-y: scroll;
}
