javascript - How to add vertical scroll bar to one div only without specifying height? - Stack Overflow

admin管理员组

文章数量:1317906

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.

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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 29, 2012 at 23:35 sabithpocker 15.6k11 gold badge4343 silver badges7777 bronze badges asked Aug 29, 2012 at 23:19 RadekRadek 11.1k5656 gold badges169169 silver badges270270 bronze badges 4

• Your page has only this table? – sabithpocker Commented Aug 29, 2012 at 23:27
• 1 I have added javascript and jquery tags assuming that there can be no pure css solution. – sabithpocker Commented Aug 29, 2012 at 23:36
• @sabithpocker: basically yes :-) but the code I posted is in the second row of the main table. – Radek Commented Aug 29, 2012 at 23:36
• I assume what you want is to share available window height between elements so that everything fits in, if there is not enough space put a sroll bar on "tr_info". Is it what you want? – sabithpocker Commented Aug 29, 2012 at 23:43

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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

Corrected Fiddle : http://jsfiddle/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'});
    }
});

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

http://jsfiddle/Wexcode/xMdPA/

Less text: http://jsfiddle/Wexcode/xMdPA/1/

You can also get the text to stay at the bottom of the page: http://jsfiddle/Wexcode/xMdPA/2/

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/rZV5u/ for example.

Hope this helps!

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

本文标签： javascriptHow to add vertical scroll bar to one div only without specifying heightStack Overflow