如何仅将垂直滚动条添加到一个div中而不指定高度？

Question

Can I add a scroll bar to a div when needed but without specifying any height either for the div itself or for a container that this div must be in?

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.

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.

Answer 1

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

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

Less text: 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/

Answer 2

Fiddle http://jsfiddle.net/RSh9H/2/show/

Corrected Fiddle : 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

going off @zenkaty 's post,

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.

(as opposed to overflow-y:scroll which will always show a scroll bar.

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, then you can use overflow-y:auto . Please see http://jsfiddle.net/rZV5u/ for example.

Hope this helps!

Answer 4

Just put this on your div - if you add it to the body/html, then the whole window will scroll, obviously.

div {
  overflow-y: scroll;
}