multiple - remove css jquery
JQuery: altura dinámica() con tamaño de ventana() (4)
Tengo un problema idéntico a este póster: problema de Jquery con height () y resize ()
Pero la solución no soluciona mi problema. Tengo tres divs apilados, y quiero usar JQuery para hacer que el medio se ajuste en altura al 100% de la altura de la ventana, menos la altura (23px * 2) de los otros divs superior e inferior. Funciona en el cambio de tamaño, pero está apagado (corto) en 16px cuando el documento se carga inicialmente.
HTML
<body>
<div id="bg1" class="bg">top</div>
<div id="content">
help me. seriously.
</div>
<div id="bg2" class="bg">bottom</div>
</body>
CSS
html,
body {
width:100%;
height:100%;
}
.bg {
width:315px;
height:23px;
margin:0 auto;
text-indent:-9000px;
}
#bg1 {background:url(../images/bg1.png) 0 50% no-repeat;}
#bg2 {background:url(../images/bg2.png) 0 50% no-repeat;}
#content {
width:450px;
margin:0 auto;
text-align: center;
}
JQuery
$(document).ready(function(){
resizeContent();
$(window).resize(function() {
resizeContent();
});
});
function resizeContent() {
$height = $(window).height() - 46;
$(''body div#content'').height($height);
}
Bueno, ¿qué tal una respuesta CSS? Utilizamos display: table . Luego, cada uno de los divs son filas, y finalmente aplicamos una altura del 100% a la ''fila'' media y voilà.
body { display: table; }
div { display: table-row; }
#content {
width:450px;
margin:0 auto;
text-align: center;
background-color: blue;
color: white;
height: 100%;
}
La solución más limpia, también puramente CSS, sería usar calc y vh.
La altura del div medio se calculará así:
#middle-div {
height: calc(100vh - 46px);
}
Es decir, el 100% de la altura de la ventana gráfica menos 2 * 23px. Esto asegurará que la página se cargue correctamente y sea dinámica (demostración aquí) .
También recuerde usar el tamaño de la caja, de modo que los rellenos y los bordes no hagan que los divs superen la ventana gráfica.
Para ver la altura de la ventana mientras se cambia el tamaño (o después), inténtelo:
$(window).resize(function() {
$(''body'').prepend(''<div>'' + $(window).height() - 46 + ''</div>'');
});
Siento que debería haber una solución sin JavaScript, pero ¿cómo es esto?
$(window).resize(function() {
$(''#content'').height($(window).height() - 46);
});
$(window).trigger(''resize'');