¿Cómo fuerzo que un bloque DIV se extienda al final de una página incluso si no tiene contenido?

190

En el marcado que se muestra a continuación, estoy tratando de hacer que el div de contenido se extienda hasta el final de la página, pero solo se estira si hay contenido para mostrar. La razón por la que quiero hacer esto es porque el borde vertical sigue apareciendo en la página, incluso si no hay ningún contenido para mostrar.

Aquí está mi HTML :

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content">
    </div>

Y mi CSS :

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}
css  html  border 
— Maquinilla de afeitar
fuente
¿Qué quiere que haga si hay más contenido que puede caber en la página? ¿Qué navegadores te interesan?
— drs9222

Respuestas:

116

Su problema no es que el div no esté al 100% de altura, sino que el contenedor que lo rodea no lo esté. Esto ayudará en el navegador que sospecho que está usando:

html,body { height:100%; }

Es posible que también necesite ajustar el relleno y los márgenes, pero esto le llevará al 90% del camino. Si necesita que funcione con todos los navegadores, tendrá que jugar un poco.

Este sitio tiene algunos ejemplos excelentes:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

También recomiendo ir a http://quirksmode.org/

— Jason Hernández
fuente
47
Esta solución no es amigable para las páginas que se desplazan.
— jbranchaud
3
propiedad min-height en CSS le debería ayudar a cabo ... supongo
— Alfabravo
1
Curiosamente, esto resolvió mis problemas de desplazamiento en lugar de causarlos
— Alan Macdonald
No me funciona en la última versión de Chrome.
— HelloWorldNoMore
49

Trataré de responder la pregunta directamente en el título, en lugar de estar empeñado en pegar un pie de página en la parte inferior de la página.

Haga que div se extienda hasta la parte inferior de la página si no hay suficiente contenido para llenar la ventana vertical del navegador disponible:

Demostración en (arrastre el asa del marco para ver el efecto): http://jsfiddle.net/NN7ky
(al revés: limpio, simple. A la baja: requiere flexbox - http://caniuse.com/flexbox )

HTML:

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

CSS:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da - o tengo demasiado sueño

— Gima
fuente
14
Algunos de nosotros tenemos la suerte de admitir solo navegadores "modernos", así que esto fue increíblemente útil para mí. Gracias Gima Intenté varias formas de hacer algo como esto, pero siempre se rompió de varias maneras sutiles. Esto es mucho mejor. Todavía no entiendo exactamente por qué funciona de esta manera.
— Chris Nicola
1
El elemento Flexbox intenta dividir su área de contenido entre los elementos que contiene. La solución que ofrecí funciona mediante 1) negar la reducción de divs y 2) permitir el crecimiento de .div2. Por lo tanto, los divs no se reducen para ocultar su contenido, y solo .div2 puede expandirse.
— Gima
Así que esto soluciona el problema que tenía en Firefox, donde el contenido todavía era un poco demasiado grande para el navegador. Desafortunadamente, en Chrome, esto solo no soluciona ese problema. Sin embargo, también establece el margen y el relleno en 0.
— Michael Scheper
esta es la respuesta, min-altura correcta: 100% sólo funciona si no hay nada más en el contenedor primario, y Calc no es realmente helpng si el hermano anterior elemento de expansión tiene desconocida altura
— zakius
Después de horas luchando con este problema, esta es la única solución que realmente me solucionó. Solo falta una pequeña explicación de lo que hace cada parte. Pero de todos modos, muchas gracias @Gima.
— pylund
18

Intenta jugar con la siguiente regla css:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

Cambia la altura para adaptarla a tu página. la altura se menciona dos veces para compatibilidad cruzada con el navegador.

— Kevin Read
fuente
esto funciona, pero descubrí que si aumento la altura mínima a más de 600 px, crea un desplazamiento. ¿Tendrías alguna idea de por qué sucede esto?
— Siddharth Patel
1
@SiddharthPatel Porque el #content div está desbordando su padre. Por lo tanto, configure el padre del #content div para que tenga un valor de desbordamiento: auto o desbordamiento: css oculto y debería expandirse / desbordarse para ajustarse, en lugar de desplazarse. Probablemente sería mejor plantear preguntas como nuevas preguntas la próxima vez en lugar de comentarios :)
— Colt McCormack
Después de probar el método de cada respuesta, este es el único que funciona. Incluso esto funciona perfectamente, porque tengo que ajustar el valor de altura para que coincida con la altura de la página, por lo que se necesita un ajuste. Sin embargo, funciona igual para todos los navegadores.
— TARKUS
Muchas gracias por esta respuesta. Es simple y funciona bien en múltiples plataformas. Realmente había usado esto antes sin darme cuenta hace aproximadamente 1 año, desearía poder votar dos veces.
— vedi0boy
3

La propiedad min-height no es compatible con todos los navegadores. Si necesita su #contenido para extender su altura en páginas más largas, la propiedad de altura lo acortará.

Es un truco, pero podría agregar un div vacío con un ancho de 1px y una altura de, por ejemplo, 1000px dentro de su #content div. Eso obligará al contenido a tener al menos 1000 px de alto y aún permitirá que el contenido más largo extienda la altura cuando sea necesario

— Gene
fuente
3

Si bien no es tan elegante como CSS puro, un poco de JavaScript puede ayudar a lograr esto:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
— Adam Franco
fuente
3

Tratar:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

No lo he probado todavía ...

— Steph
fuente
3

Pie de página adhesivo con altura fija:

Esquema HTML:

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS:

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}
— David Horák
fuente
2

Pruebe http://mystrd.at/modern-clean-css-sticky-footer/

El enlace de arriba está caído, pero este enlace https://stackoverflow.com/a/18066619/1944643 está bien. :RE

Manifestación:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>
— Vinicius José Latorre
fuente
1
@codemirror gracias, acabo de editar el comentario con otro enlace que está funcionando.
— Vinicius José Latorre
1

Puede usar la unidad de longitud "vh" para la propiedad de altura mínima del elemento mismo y sus padres. Es compatible desde IE9:

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS:

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}
— Nico
fuente
Esto solo estira el div hasta la altura de la ventana gráfica, no la página en sí.
— jansmolders86
1

Creo que el problema se solucionaría simplemente haciendo que el html llene el 100% también, podría ser que el cuerpo llene el 100% del html pero html no llena el 100% de la pantalla.

Probar con: 

html, body {
      height: 100%;
}
— David Marciel
fuente
0

No tengo el código, pero sé que lo hice una vez usando una combinación de altura: 1000px y margen inferior: -1000px; Trata eso.

— Alexander Morland
fuente
Wow, eso realmente funciona! Pero si el contenido desborda el contenedor, no es posible ver la parte desbordada ...
— adripanico
0

Dependiendo de cómo funcione su diseño, puede salirse con la suya estableciendo el fondo en el <html>elemento, que siempre es al menos la altura de la ventana gráfica.

0

No es posible lograr esto usando solo hojas de estilo (CSS). Algunos navegadores no aceptarán

height: 100%;

como un valor más alto que el punto de vista de la ventana del navegador.

Javascript es la solución de navegador cruzado más fácil, aunque como se mencionó, no es limpia ni hermosa.

— Martín
fuente
-2

Sé que este no es el mejor método, pero no pude resolverlo sin alterar las posiciones de mi encabezado, menú, etc. Entonces ... usé una tabla para esas dos columnas. Fue una solución RÁPIDA. No se necesita JS;)

— Encaminarse a
fuente
-2

No es la mejor ni la mejor implementación de los mejores estándares, pero puede cambiar el DIV por un SPAN ... No es una solución tan recomendable pero rápida = P =)

— Metafaniel
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.