100% altura div y desbordamiento: auto

Question

Tengo un menú vertical en el lado izquierdo de la pantalla, y quiero tomar el 100% de altura de la resolución, pero si el div (del menú) necesita más, quiero que aparezca scroll Mi pregunta: Tengo un div con altura: 100% y desbordamiento automático. Necesito tener el desplazamiento solo en ese div, pero este div debe ser el 100% de la resolución de la pantalla. Ahora bien, si lo pongo así, el desplazamiento toma toda la página, pero si pongo altura fija en el div funciona correctamente. Pero necesito tener el 100% de altura. ¡Muchas gracias!

Answer 1

sé de 2 soluciones comunes a este:

1) Uso de JavaScript para determinar la altura de la ventana gráfica y explícita ajustar la altura del elemento de la misma (por ejemplo, algo a lo largo de las líneas de yourMenuDivElement.style.height = document.documentElement.clientHeight; Usted'. d también tiene que asegurarse de capturar la ventana de cambiar el tamaño de evento para restablecer la altura del menú si los cambios en la altura de la ventana.

2) la solución mucho más simple CSS sólo sirve para fijar la altura de los elementos html y body a ambos son 100% Creo que esto generalmente funciona bien, aunque es posible que tenga otras cosas en su página que podrían verse afectadas negativamente al establecer la altura del documento al 100%, tal vez, pero definitivamente vale la pena intentarlo. CSS sería algo así como:

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

Answer 2

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

probado con éxito en:

OSX

• FF 3.6
• Safari 4 + 5
• Chrome 47,0

Win7

• IE 7
• IE 8
• FF 3,5

Ver el ejemplo anterior. El código funciona bien ... Intenta cambiar el tamaño de la ventana. Verá que cuando la parte inferior del navegador llega al último elemento de la lista, aparece una barra de desplazamiento en el menú 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; 
    }    

Answer 3

Hay una respuesta farily simple a este, usando altura: 100% tanto en los selectores de HTML y el cuerpo en CSS, se puede decir con eficacia el menú debe ser el 100% de la altura, pero desplazarse cuando sea necesario.

He hecho un ejemplo para usted aquí en jsFiddle.net.(Cambiar el tamaño de la ventana de resultados para ver el efecto)

espero que ayude :)

Answer 4

he terminado respuesta gearsdigital con un div "contenido" del contenido de la página:

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

código: http://jsfiddle.net/Guillaume/NnW5r/11/

Cambiar el tamaño de la ventana y desplazarse por la página para ver si se ajusta a sus necesidades

Answer 5

funciona en todas partes

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

ejemplo

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