Para que div se extienda a la altura completa

80

¿Hay algún método que pueda usar para que un div se extienda a la altura completa? También tengo un pie de página pegajoso.

Aquí está la página web: Sitio web eliminado . El bit medio del que estoy hablando es el div blanco, midcontent que tiene valores CSS:

.midcontent{
     width:85%;
     margin:0 auto;
     padding:10px 20px;
     padding-top:0;
     background-color:#FFF;
     overflow:hidden;
     min-height:100%;
     max-width:968px; 
     height:100%;
}

Así que sí, obviamente height:100%no funcionó. Además, TODOS los contenedores principales tienen una altura establecida.

Aquí está la estructura general

<body>
    <div id="wrap">
        <div id="main">
            <div class="headout">
                <div class="headimg"></div>
            </div>
            <div class="midcontainer"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer"></div>
    </div>
css xhtml html oso
fuente
Esta es una pregunta MUY común, su solución casi definitivamente se encontrará en otras respuestas: stackoverflow.com/search?q=css+div+100 o stackoverflow.com/search?q=css+div+height
Ben
2
Lo he rastreado, la mayoría dice lo mismo. He aplicado lo dicho, todavía no arreglado.
oso
1
No estoy seguro de que su pregunta sea lo suficientemente clara. ¿Está buscando algo que haga que "midcontainer" ocupe todo el espacio restante entre "headout" y "footer"? Porque eso ciertamente no es igual al 100%
cesarsalazar

Respuestas:

138

¿Recuerdas haber configurado la altura de las etiquetas html y body en tu CSS? Generalmente, así es como he conseguido que los DIV se extiendan a la altura máxima:


<html>
  <head>
    <style type="text/css">

      html,body { height: 100%; margin: 0px; padding: 0px; }
      #full { background: #0f0; height: 100% }

    </style>
  </head>
  <body>
    <div id="full">
    </div>
  </body>
</html>
Tom
fuente
Tengo el mismo problema, pero aunque he ajustado la altura del cuerpo al 100%, no funciona. enlace Si hace clic en el portafolio, elige una categoría y luego hace clic en una miniatura, aparece una presentación de diapositivas. El fondo de la presentación de diapositivas no se extiende a toda la página, aunque su altura se establece en 100%.
nitrato de sodio
2
Creo que el código es correcto, pero la pregunta es incorrecta: debería preguntar si configura el cuerpo Y las etiquetas html al 100%. Porque de alguna manera la etiqueta html también puede afectar la salida de diferentes maneras ...
Alexis Wilke
2
De alguna manera, html 100% parece capturar solo la pantalla visible. Usando Chrome devtool, cuando selecciono el elemento "html", termina al final de la página visible, cuando me desplazo hacia abajo es como si ya no formara parte de <html>
Nathan H
¿qué hay de usar vh?
mfnx
38

Esto podría ser de ayuda: http://www.webmasterworld.com/forum83/200.htm

Una cita relevante:

La mayoría de los intentos para lograr esto se realizaron asignando la propiedad y el valor: div {altura: 100%}; esto solo no funcionará. La razón es que sin una altura definida por los padres, div {altura: 100%;} no tiene nada que factorizar el 100% por ciento, y tendrá un valor predeterminado de div {altura: auto;} - auto es un valor "según sea necesario "que se rige por el contenido real, de modo que div {altura: 100%} a = solo se extenderá hasta donde lo exija el contenido.

La solución al problema se encuentra asignando un valor de altura al contenedor principal, en este caso, el elemento body. Escribir el estilo de su cuerpo para incluir la altura al 100% proporciona el valor necesario.

html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}
Brian Clapper
fuente
2
Hola, todos los padres tienen contenedores height:100%.
oso
2
@Shamil, ¿Todos los padres incluyen la etiqueta html? Ese puede haber sido tu problema. La mayoría de las veces me olvido de la etiqueta html como etiqueta gráfica.
Alexis Wilke
@AlexisWilke sí, lo hizo - rara vez no incluyo etiquetas html
Bear
3
Incluyendo la etiqueta de formulario para mi sorpresa
Adam
el elemento clave es la altura del 100% en el cuerpo Y las etiquetas html
luismesas
9

Ésta es una vieja pregunta. CSS ha evolucionado. Ahora existe la vhunidad (altura de la ventana gráfica), también nuevas opciones de diseño como flexboxo CSS gridpara lograr diseños clásicos de manera más limpia.

Frank Lämmer
fuente
2

En caso de que también establecer la altura del html y el cuerpo al 100% haga que todo sea más complicado para ti como lo hizo para mí, lo siguiente funcionó para mí:

height: calc(100vh - 33rem)

El -33rem es la altura de los elementos que vienen después del que queremos tomar en altura completa, es decir, 100vh. Al restar la altura, nos aseguraremos de que no haya desbordamiento y siempre responderá (asumiendo que estamos trabajando con rem en lugar de px).

Joehat
fuente
Solo asegúrese de no hacer height: calc(100vh -33rem)donde el signo negativo toque el valor, ya que será CSS no válido. Además, 33rem también podría reemplazarse por un valor de píxel.
Rich Finelli
1

si la configuración de la altura al 100% no funciona, intente min-height = 100% para div. Aún tienes que configurar la etiqueta html.

html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#fullHeight{

    width: 450px;
    **min-height: 100%;**
    background-color: blue;

}
Dimitris Kremezis
fuente