100% высоты и переполнение: авто

У меня есть вертикальное меню в левой части экрана, и я хочу принять 100% -ную высоту разрешения, но если div (в меню) нуждается в большем количестве, я хочу показать свиток. Мой вопрос: у меня есть один div с высотой: 100% и переполнение авто. Мне нужен прокрутка только на этом div, но этот div должен быть на 100% от разрешения экрана. Теперь, если я ставлю вот так, прокрутка займет всю страницу, но если я установил фиксированную высоту в div, она будет работать правильно. Но мне нужно быть 100% высоты. Большое вам спасибо!

Ответы

Ответ 1

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

Успешно протестировано в:

OSX

  • FF 3.6
  • Safari 4 + 5
  • Chrome 47.0

WIN7

  • IE 7
  • IE 8
  • FF 3.5

См. мой пример выше. Код работает нормально... Попробуйте изменить размер окна. Вы увидите, как только нижняя часть браузера достигнет последнего элемента списка, в меню 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;
    }

Ответ 2

Существует простой ответ на этот вопрос, используя высоту: 100% как для HTML, так и для селекторов тела в CSS, вы можете эффективно сказать, что меню будет на 100% от высоты, но прокручивайте, когда нужно.

Я привел пример для вас здесь, в jsFiddle.net. (измените размер окна результатов, чтобы увидеть эффект)

Надеюсь, это поможет:)

Ответ 3

Я знаю два общих решения:

1) Используйте JavaScript, чтобы определить высоту области просмотра и явно установите высоту элемента одинаково (например, что-то вдоль строк yourMenuDivElement.style.height = document.documentElement.clientHeight;). Вам также необходимо убедиться в том, что захват события изменения размера окна до reset высоты меню, если изменяется высота окна.

2). Более простое решение только для CSS - установить высоту элементов html и body на 100%. Я считаю, что это работает нормально, хотя на вашей странице могут быть другие вещи, на которые может негативно повлиять установка высоты документа на 100%, возможно, но это определенно стоит попробовать. CSS будет примерно таким:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
div#menu {
    height: 100%;
    overflow: auto;
}

Ответ 5

Работает везде

JS

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

Пример

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