javascript - span - ¿Cómo aplicar 100% de altura a div?
span innerhtml (13)
Quiero hacer que el último / tercer div se llene todo el espacio restante. Me dieron el 100% de altura, pero hay una barra de desplazamiento que se acerca, que no quiero mostrar. Hay alguna solución CSS para el mismo. Si no es posible desde css, la solución jQuery / JS estará bien.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Aquí hay una pequeña solución que he hecho:
<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
<div id="firstDiv" style="height: 100px; background-color: #ddd">
</div>
<div id="secondDiv" style="height: 25px; background-color: #eee">
</div>
<div id="thirdDiv" style="background-color: #ccc;">
a</div>
</div>
</body>
</html>
En jQuery, puedes probar algo como esto:
$(function() {
$(window).resize(function() {
$(''div:last'').height($(window).height() - $(''div:last'').offset().top);
});
$(window).resize();
});
Cada vez que se cambia el tamaño de la ventana, la altura del último div se modifica para que el div se extienda hasta el final de la página. El método de cambio de tamaño de la ventana se invoca en la carga de la página para que el div se redimensione inmediatamente.
Si resta el desplazamiento superior de la div a la altura de la ventana, se le deja la altura máxima disponible. Si tiene márgenes, bordes de relleno aplicados, es posible que tenga que ajustar el valor que se resta, por ejemplo:
$(''div:last'').height($(window).height() - $(''div:last'').offset().top - 30);
Suponiendo que desea el div 30px desde la parte inferior de la ventana.
En los navegadores modernos: establecer position: relative en el div contenedor, position: absolute en el tercer div. Luego puede colocarlo en la parte superior e inferior del contenedor al mismo tiempo: top: 0px , bottom: 0px;
Es un poco feo, pero funciona ...
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="width:100%;height:100%;">
<div style="width:100%;height:100px;background-color:#ddd;"> </div>
<div style="width:100%;height:25px;background-color:#eee;"> </div>
<div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;"> </div>
</div>
</body>
</html>
La propiedad ''altura: 100%;'' instruirá a los navegadores a tomar el 100% del espacio de pantalla disponible para esa división en particular, lo que significa que su navegador comprobará el tamaño del espacio de navegación y lo devolverá al motor CSS sin verificar si hay elementos dentro de él.
La única solución que veo para encajar aquí es usar la solución provista por David para usar ''position: absolute; abajo: 0; para eso div.
Puede ocultar el desbordamiento en el DIV que contiene:
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
</style>
</head>
<body>
<div style="overflow:hidden;height:100%">
<div style="height:100px;background-color:#ddd"></div>
<div style="height:25px;background-color:#eee"></div>
<div style="height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Tenga en cuenta que el contenido puede desaparecer al cambiar el tamaño de la ventana utilizando esta técnica.
Puede usar valores de CSS puro height:100% (donde 100% es el alto del área visible en la ventana) valores en el modo de peculiaridades al no usar DOCTYPE en absoluto o al usar DOCTYPE HTML 4.0 con fallas de IE (sin la url .dtd)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>
Puede deshacerse del <!DOCTYPE.. completo, todavía tendría el mismo efecto. overflow:hidden declaración overflow:hidden en el estilo del cuerpo es deshacerse de la barra de desplazamiento vacía en IE. Pero recuerda: este es el modo de caprichos, lo que significa que estás en un territorio impredecible, ¡el modelo de caja de CSS difiere de un navegador a otro!
Simplemente no se preocupe por eso si su objetivo es que el color llene la parte inferior.
Establezca el color del div exterior y deje que el tercero cambie el tamaño de su altura como lo desee el contenido.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%;background-color:#ccc">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style=""> </div>
</div>
</body>
</html>
También puede usar columnas falsas agregando una imagen de fondo que se repite verticalmente a la CSS haciendo que las columnas aparezcan como un espacio, esto da la apariencia. Puede agregar esta imagen al div que envuelve las tres columnas o a la etiqueta del cuerpo.
Si estas columnas van a tener contenido, probablemente valga la pena agregar algunas, ya que las columnas se comportarán de manera diferente.
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
$(window).resize(function(){ var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
Esto debería incluirse en caso de que el navegador cambie de tamaño ...
$(window).resize(function(){
$(''.elastic'').each(function(i,n){
var ph = $(this).parent().height();
var pw = $(this).parent().width();
var sh = 0;
var s = $(this).siblings().each(function(i,n){
sh += $(this).height();
})
$(this).height(ph-sh);
sh = 0, ph = 0, s=0;
});
});
ponga lo siguiente en su etiqueta de script o javascript externo. entonces cambia
cuando cambie el tamaño de la ventana ... automáticamente ajustará su altura al espacio disponible en la parte inferior. usted podría tener tantos divs como quiera, sin embargo, solo puede tener un elástico dentro de ese padre. no podría molestarse en calcular varios elásticos :) espero que ayude
html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Tal vez esto podría funcionar ?! Pero no sé qué pasa si hay que mutear el texto ...
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
document.getElementById(''app'').style.height = window.innerHeight + "px"
}