100% height div and overflow:auto

后端未结

关注

 5  1166

I have got a vertical menu on the left side of the screen, and i want to take 100% height of the resolution, but if the div(of the menu) needs more, i want to appear scroll. My

相关标签:

5条回答

孤独总比滥情好

2021-02-12 13:11
I know of 2 common solutions to this:

1) Use JavaScript to determine the height of the viewport and explicitly set the height of the element to the same (e.g. something along the lines of yourMenuDivElement.style.height = document.documentElement.clientHeight;. You'd also have to make sure to capture the window resize event to reset the height of the menu if the window height changes.

2) The much simpler CSS-only solution is to set the height of the html and body elements to both be 100%. I believe this generally works OK, though you may have other things on your page that could be negatively affected by setting the document height to 100% perhaps - but it's definitely worth trying it. CSS would be something like:
```
html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
div#menu {
    height: 100%;
    overflow: auto;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

独厮守ぢ

2021-02-12 13:12

~~http://cssdesk.com/yxShB~~ ~~http://gearsdigital.com/sandbox/~~ http://jsfiddle.net/WB4Qc/

Successfully tested in:

OSX

FF 3.6
Safari 4 + 5
Chrome 47.0

WIN7

IE 7
IE 8
FF 3.5

See my example above. The code works fine... Try to resize the window. You'll see once the bottom of the browser reaches the last list element an scrollbar appears on the menu div.

Html:

<div id="menu">
    <ul>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
        <li>owepwew</li>
    </ul>
</div>

Css:

    * {margin:0;padding:0;}
    html, body{
        height:100%;
        background:#eee;
    }
    #menu {
        background:#ccc;
        width:220px;
        height:100%;
    }
    #menu ul {
        height: 100%;
        overflow: auto;
    }

0 讨论(0)

北海茫月

2021-02-12 13:16

Works everywhere

function overflowFillHeight(el,listener){
    var sumH = 0;
    if(el){
       var parEls = el.parentNode.childNodes;
       var style = null;
       if(parEls.length > 1){
           for(var j = 0; j < parEls.length; j++){
              if(parEls[j].nodeType != 3){
                 if(parEls[j] != el ){

                    sumH += parEls[j].clientHeight;

                    if(typeof window.getComputedStyle(parEls[j]) != 'undefined'){
                       style = window.getComputedStyle(parEls[j]);
                    }else if(typeof parEls[j].currentStyle != 'undefined'){
                       style = parEls[j].currentStyle;
                    };

                    if(style){
                       sumH += parseInt(style.marginTop);
                       sumH += parseInt(style.marginBottom);
                       sumH += parseInt(style.borderTopWidth);
                       sumH += parseInt(style.borderBottomWidth);
                    };

                 };
              };
           };
       };

       style = null;
       if(typeof window.getComputedStyle(el) != 'undefined'){
          style = window.getComputedStyle(el);
       }else if(typeof el.currentStyle != 'undefined'){
          style = el.currentStyle;
       };

       if(style){
          sumH += parseInt(style.marginTop);
          sumH += parseInt(style.marginBottom);
          sumH += parseInt(style.borderTopWidth);
          sumH += parseInt(style.borderBottomWidth);
       };

       el.style.height = (el.parentNode.clientHeight - sumH)+'px';

       if(!listener){
          window.addEventListener('resize',function(){
             overflowFillHeight(el,true);
          },false);
       };
    };
};

example

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script>
    function overflowFillHeight(el,listener){
        var sumH = 0;
        if(el){
           var parEls = el.parentNode.childNodes;
           var style = null;
           if(parEls.length > 1){
               for(var j = 0; j < parEls.length; j++){
                  if(parEls[j].nodeType != 3){
                     if(parEls[j] != el ){

                        sumH += parEls[j].clientHeight;

                        if(typeof window.getComputedStyle(parEls[j]) != 'undefined'){
                           style = window.getComputedStyle(parEls[j]);
                        }else if(typeof parEls[j].currentStyle != 'undefined'){
                           style = parEls[j].currentStyle;
                        };

                        if(style){
                           sumH += parseInt(style.marginTop);
                           sumH += parseInt(style.marginBottom);
                           sumH += parseInt(style.borderTopWidth);
                           sumH += parseInt(style.borderBottomWidth);
                        };

                     };
                  };
               };
           };

           style = null;
           if(typeof window.getComputedStyle(el) != 'undefined'){
              style = window.getComputedStyle(el);
           }else if(typeof el.currentStyle != 'undefined'){
              style = el.currentStyle;
           };

           if(style){
              sumH += parseInt(style.marginTop);
              sumH += parseInt(style.marginBottom);
              sumH += parseInt(style.borderTopWidth);
              sumH += parseInt(style.borderBottomWidth);
           };

           el.style.height = (el.parentNode.clientHeight - sumH)+'px';

           if(!listener){
              window.addEventListener('resize',function(){
                 overflowFillHeight(el,true);
              },false);
           };
        };
    };
    </script>
    <style>
    *{
        margin:0px;
        padding:0px;
    }
    html,body{
        height:100%;
    }
    .g1{
        margin-bottom:34px;
        border:20px double #CCFF00;
    }
    </style>
    </head>

    <body>

    <div style="height:100%; background:#F00;">
    <div class="g1" style="height:37px; background:#00F;">1</div>
    <div id="qqq" class="g1" style="background:#39F; overflow:auto; height:300px;">
       <div style="height:1000px;">2</div>
    </div>
    <div style="height:100px; background:#060;">3</div>
    </div>
    <script>
       overflowFillHeight(document.getElementById('qqq'));
    </script>
    </body>
    </html>

0 讨论(0)

花落未央

2021-02-12 13:28

There is a farily simple answer to this, using height: 100% on both the HTML and body selectors in CSS, you can effectively tell the menu to be 100% of the height, but scroll when it needs to.

I have made an example for you here at jsFiddle.net. (resize the Result window to see the effect)

Hope it helps :)

0 讨论(0)
发布评论:

提交评论
- 加载中...
误落风尘

2021-02-12 13:28

I've completed gearsdigital response with a "content" div for the content of the page:

http://jsfiddle.net/Guillaume/NnW5r/11/show/

code: http://jsfiddle.net/Guillaume/NnW5r/11/

Resize the window and scroll the page to see if it fits your needs

0 讨论(0)
发布评论:

提交评论
- 加载中...