html - que - ¿Por qué la altura no funciona al 100% para expandir divs a la altura de la pantalla?
height 100% (9)
Quiero que el carrusel DIV (s7) se expanda a la altura de toda la pantalla. No tengo una idea de por qué no está teniendo éxito. Para ver la página puedes ir aquí .
body {
height: 100%;
color: #FFF;
font: normal 28px/28px''HelveticaWorldRegular'', Helvetica, Arial, Sans-Serif;
background: #222 url('''') no-repeat center center fixed;
overflow: hidden;
background-size: cover;
margin: 0;
padding: 0;
}
.holder {
height: 100%;
margin: auto;
}
#s7 {
width: 100%;
height: 100%: margin: auto;
overflow: hidden;
z-index: 1;
}
#s7 #posts {
width: 100%;
min-height: 100%;
color: #FFF;
font-size: 13px;
text-align: left;
line-height: 16px;
margin: auto;
background: #AAA;
}
<div class="nav">
<a class="prev2" id="prev2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
</a>
<a class="next2" id="next2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
</a>
</div>
<div class="holder">
<tr>
<td>
<div id="s7">
{block:Posts}
<div id="posts">
Alternativamente, si usa position: absolute , height: 100% funcionará bien.
Debes probar con los elementos padres;
html, body, form, main {
height: 100%;
}
Entonces esto será suficiente:
#s7 {
height: 100%;
}
En la fuente de la página veo lo siguiente:
<div class="holder">
<div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">
Si coloca el valor de altura en la etiqueta, usará esto en lugar de la altura definida en el archivo css.
Esto puede no ser ideal pero siempre puedes hacerlo con javascript. O en mi caso jQuery.
<script>
var newheight = $(''.innerdiv'').css(''height'');
$(''.mainwrapper'').css(''height'', newheight);
</script>
Para que un valor de porcentaje funcione para la altura, se debe determinar la altura del padre. La única excepción es el elemento raíz <html> , que puede ser una altura porcentual. .
Entonces, le has dado a todos tus elementos la altura, excepto el <html> , así que lo que debes hacer es agregar esto:
html {
height: 100%;
}
Y tu código debería funcionar bien.
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
#fullheight {
width: 250px;
background: blue;
}
<div id=fullheight>
Lorem Ipsum
</div>
Si coloca los elementos dentro del div, puede configurar el relleno superior e inferior al 50%.
Así que algo como esto:
#s7 {
position: relative;
width:100%;
padding: 50% 0;
margin:auto;
overflow: hidden;
z-index:1;
}
Si desea, por ejemplo, una columna de la izquierda (altura 100%) y el contenido (altura automática) puede usar absoluta:
#left_column {
float:left;
position: absolute;
max-height:100%;
height:auto !important;
height: 100%;
overflow: hidden;
width : 180px; /* for example */
}
#left_column div {
height: 2000px;
}
#right_column {
float:left;
height:100%;
margin-left : 180px; /* left column''s width */
}
en html:
<div id="content">
<div id="left_column">
my navigation content
<div></div>
</div>
<div id="right_column">
my content
</div>
</div>
También deberá establecer una altura del 100% en el elemento html :
html { height:100%; }
Como nadie ha mencionado esto ...
Enfoque moderno:
Como alternativa a la configuración de las alturas del elemento html / body en 100% , también puede utilizar longitudes de porcentaje de ventana gráfica:
5.1.2. Longitud de porcentaje de vista: las unidades ''vw'', ''vh'', ''vmin'', ''vmax''
Las longitudes porcentuales de la ventana gráfica son relativas al tamaño del bloque inicial que contiene. Cuando se cambia la altura o el ancho del bloque que contiene inicial, se escalan en consecuencia.
En este caso, podría usar el valor 100vh (que es la altura de la ventana 100vh ) - (example)
body {
height: 100vh;
}
Establecer una min-height también funciona. (example)
body {
min-height: 100vh;
}
Estas unidades son compatibles con la mayoría de los navegadores modernos; la asistencia se puede encontrar aquí .