Para que div extienda altura completa

¿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 adhesivo.Para que div extienda altura completa

Aquí está la página web: Sitio web eliminado. El bit medio 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 un conjunto de altura.

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>

Fuente

2010-12-27 bear

Esta es una pregunta muy común, su solución casi definitivamente se encontrarán en otras respuestas: http://stackoverflow.com/search?q=css+div+100 o http://stackoverflow.com/ search? q = css + div + height – Ben

He navegado, la mayoría dice lo mismo. Apliqué lo que se dijo, todavía no se corrigió. – bear

No estoy seguro si su pregunta es lo suficientemente clara. ¿Estás buscando algo que haga que "midcontainer" ocupe el * espacio restante * entre "headout" y "footer"? Porque eso ciertamente no es igual al 100% – cesarsalazar

108

¿Se acordó establecer la altura de las etiquetas HTML y el cuerpo en el CSS? Esta es generalmente la forma de DIVs he llegado a extenderse hasta 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>

Fuente

2010-12-28 22:58:43 Tom

Tengo el mismo problema, pero aunque he configurado la altura del cuerpo al 100%, no funciona. [enlace] (http://www.cerensaner.com/) Si hace clic en la cartera, selecciona 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 como 100%. – sodiumnitrate

Creo que el código es correcto, pero la pregunta es incorrecta: debería preguntar si configuraste el cuerpo Y las etiquetas html al 100%. Porque de alguna manera la etiqueta html también puede afectar el resultado de diferentes maneras ... –

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 fuera parte de –

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

Una cita relevante:

mayoría de los intentos de lograr esto se hicieron mediante la asignación de la propiedad y el valor : div {height: 100%} - esto solo no funcionará. La razón es que sin un padre definido alto, el div {altura: 100%;} no tiene nada para factorizar el 100% por ciento, y tendrá un valor predeterminado de div {altura: auto;} - auto es un "como valor necesario "que se rige por el contenido real , de modo que el div {altura: 100%} a = solo se extenderá hasta donde el contenido lo exija.

La solución al problema se encuentra asignando un valor de altura al contenedor primario, en este caso, el elemento del cuerpo. Escribir el texto de su cuerpo para incluir la altura 100% suministra el valor necesario.
html, body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 

Fuente

2010-12-27 00:27:14

Hola, todos los contenedores de los padres tienen 'altura: 100%'. – bear

@Shamil, ¿Todos los padres incluyendo la etiqueta html? Ese puede haber sido tu problema. A menudo me olvido de la etiqueta html como una etiqueta gráfica. –

@AlexisWilke Sí, lo hizo - rara vez no incluyo las etiquetas html – bear

Si por alguna razón un elemento se vuelve más alta que la altura del HTML o el cuerpo, me gustaría utilizar jQuery para hacer la sección más grande .

<script type="text/javascript"> 
    $($('#full').height($('#main').height())); 
</script>

Fuente

2017-10-26 23:40:40

Para que div extienda altura completa

Respuesta

Cuestiones relacionadas