1

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

div 是页面上的最底部元素，我希望用户能够调整浏览器窗口的大小。因此，当动态添加到 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 添加了滚动条。

4

4 回答 4

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

于 2012-08-29T23:38:16.030 回答
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'});
    }
});
于 2012-08-30T00:07:40.453 回答
1

关闭@zenkaty 的帖子，

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

（与之相反overflow-y:scroll，它将始终显示滚动条。

编辑：

正如 Sabithpocker 指出的那样，如果您没有高度，据我所知，如果太多，表格将展开以显示所有文本。如果设置高度，则可以使用overflow-y:auto. 例如，请参阅http://jsfiddle.net/rZV5u/。

希望这可以帮助！

于 2012-08-29T23:39:20.830 回答
0

只需将其放在您的 div 上 - 如果您将其添加到 body/html 中，那么整个窗口显然会滚动。

div {
  overflow-y: scroll;
}
于 2012-08-29T23:28:48.987 回答