¿Cómo hacer que un div se expanda para adaptarse al espacio vertical disponible?

Estoy buscando una forma de expandir el div que contiene el contenido de mi página principal para que se ajuste al espacio que queda después de agregar mi encabezado y pie de página. El HTML se presenta de este modo:¿Cómo hacer que un div se expanda para adaptarse al espacio vertical disponible?

<div id="wrapper"> 
    <div id="header-wrapper"> 
     <header> 
      <div id="logo-bar"></div> 
     </header> 
     <nav></nav> 
    </div> 
    <div id="content"></div> 
</div> 


<div id="footer-wrapper"> 
    <footer></footer> 
</div>

Está diseñado para que el pie de página es siempre más allá de la parte inferior de la página estableciendo la altura de min-#wrapper al 100%. El problema es que #content no se expande para llenar el espacio vacío dentro de #wrapper, lo que dificulta obtener el aspecto que quiero. ¿Cómo puedo hacer que haga eso?

Fuente

2010-02-28 vilhalmer

EDITAR:
¿Por qué no utilizar la parte superior e inferior. Aquí hay un ejemplo completo.
Puede modificar los valores superiores e inferiores para optimizar la colocación de su encabezado/pie de página.

<html> 
<head> 
    <style type="text/css"> 
    BODY { 
    margin: 0; 
    padding: 0; 
    } 

    #wrapper { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    } 

    #header-wrapper { 
    position: absolute; 
    background-color: #787878; 
    height: 80px; 
    width: 100%; 
    } 

    #content { 
    position: absolute; 
    background-color: #ababab; 
    width: 100%; 
    top: 80px; 
    bottom: 50px; 
    } 

    #footer-wrapper { 
    position: absolute; 
    background-color: #dedede; 
    height: 50px; 
    width: 100%; 
    bottom: 0; 
    } 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 
    <div id="header-wrapper"> 
     <div id="header"> 
     <div id="logo-bar">Logo</div> 
     </div> 
     <div id="nav"></div> 
    </div> 
    <div id="content">Content</div> 
    <div id="footer-wrapper"> 
     <div id="footer">Footer</div> 
    </div> 
    </div> 
</body> 
</html>

Fuente

2010-02-28 16:28:01 Zyphrax

Utilizando tanto la parte superior ** y ** propiedades inferiores en un 'div' causa problemas en IE6 y IE7/8 en el modo de peculiaridades. No sé si el OP quiere apoyarlos. –

El uso de la parte superior/inferior es una buena idea, siempre me olvido de ellos. ¡Gracias por la respuesta detallada! – vilhalmer

¿Es posible esta técnica superior/inferior con un div de contenido 960 con ancho fijo? –

Un buen artículo para pies de página está en A List Apart: http://www.alistapart.com/articles/footers/

Tiene el ejemplo real de cómo colocar un pie de página en la parte inferior con el contenido de la expansión div.

Fuente

2010-02-28 16:37:38 Patrick

Excelente artículo, gracias por pasarlo. – vilhalmer

Esta solución resuelve problemas de desplazamiento. Cuando la página es de gran tamaño, el pie de página se coloca 2 nuevas líneas de todo el contenido:

<style> 
     #container { 
     position: relative; 
     height: 100%; 
    } 
    #footer { 
     position: absolute; 
     bottom: 0; 
    } 
    </style> 

    </HEAD> 

    <BODY> 

    <div id="container"> 

     <h1>Some heading</h1> 

    <p>Some text you have</p> 

    <br> 
    <br> 

    <div id="footer"><p>Rights reserved</p></div> 

    </div> 

    </BODY> 
    </HTML>

Fuente

2017-09-09 16:04:58 LuckyLuke82

¿Cómo hacer que un div se expanda para adaptarse al espacio vertical disponible?

Respuesta

Cuestiones relacionadas