Question

我可以在需要时为div添加滚动条，但不为div本身或此div必须包含的容器指定任何高度？

div是页面上的botton元素，我希望用户能够调整浏览器窗口的大小。因此，当动态添加到div的“数据”到达页面的按钮时，滚动条将出现。

我的页面只包含一个表，表格的第二行是代码。

<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>

我尝试了overflow-y: scroll;到div但是它向整个窗口添加了滚动条而不是div。

Answer 1

html, body { height: 100%; }
div { height: 100%; overflow: auto; }

http://jsfiddle.net/Wexcode/xMdPA/

更少文字： http://jsfiddle.net/Wexcode/xMdPA/1/

您还可以将文字留在页面底部：http://jsfiddle.net/Wexcode/xMdPA/2/

Answer 2

小提琴http://jsfiddle.net/RSh9H/2/show/

更正小提琴：http://jsfiddle.net/RSh9H/8/show/

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'});
    }
});

Answer 3

离开@zenkaty的帖子，

在该元素的样式中，放置overflow-y:auto，这样当它有溢出时会显示一个滚动条，但如果没有，它将没有滚动条。

（与overflow-y:scroll相对，总是显示滚动条。

修改

正如Sabithpocker指出的那样，如果你没有高度，据我所知，如果有太多的话，桌子会展开以显示所有文字。如果您设置了高度然后，则可以使用overflow-y:auto。例如，请参阅http://jsfiddle.net/rZV5u/。

希望这有帮助！

Answer 4

把它放在你的div上 - 如果你把它添加到body / html中，那么整个窗口显然会滚动。

div {
  overflow-y: scroll;
}

如何在不指定高度的情况下将垂直滚动条添加到一个div？

4 个答案: