¿Cómo aplicar 100% de altura a div?

Quiero hacer que el último/tercer div se llene el espacio restante. Le di el 100% de altura, pero viene una barra de desplazamiento, que no quiero mostrar. Yo tengo alguna solución de CSS para el mismo. si no es posible desde css, la solución jQuery/JS estará bien.¿Cómo aplicar 100% de altura a div?

<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">&nbsp;</div> 
     <div style="height:25px;background-color:#eee">&nbsp;</div> 
     <div style="display:block;height:100%;background-color:#ccc">&nbsp;</div> 
    </div> 
</body> 
</html>

Fuente

2009-11-30 Wasim Shaikh

si ya se está expandiendo y usted no quiere que el desplazamiento por qué no sólo establecer la altura al 90%, por ejemplo. – Drevak

En jQuery, puede intentar 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 de la última div se modifica para que el div se extiende hasta la parte inferior 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 cambie de tamaño inmediatamente.

Si resta el desplazamiento superior del div a la altura de la ventana, se queda con la altura máxima disponible. Si tiene márgenes, bordes de relleno de aplicar, 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 que el 30px div de la parte inferior de la ventana.

Fuente

2009-11-30 09:29:08

no funciona en IE7? –

Este ajuste menor incluirá relleno/margen para el div, en lugar de requerir código de codificación: '$ ('div: last'). Height ($ (window) .height() - $ ('div: last'). offset(). top - ($ ('div: last'). outerHeight (true) - $ ('div: last'). height())); ' – AaronSieb

En los navegadores modernos: juego de position: relative en el envase div, position: absolute en la tercera div. A continuación, se puede colocar en la parte superior e inferior del contenedor al mismo tiempo: top: 0px, bottom: 0px;

Fuente

2009-11-30 08:20:48

Usando esto sin embargo, el div interno no se expandirá si hay un montón de contenido en él, ¿verdad? –

Sí, se expandirá. –

Gran solución. Funcionó como se pretendía aquí. – artur

También es posible usar columnas de imitación mediante la adición de una imagen de fondo repitiendo verticalmente a la CSS haciendo las columnas aparecen juguete del espacio - esto da el aparece. Puede agregar esta imagen al div que envuelve las tres columnas o a la etiqueta del cuerpo.

Si estas columnas van a tener contenido en ellas, probablemente valga la pena agregar algunas ya que las columnas se comportarán de manera diferente.

Fuente

2009-11-30 08:44:26 matpol

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">&nbsp;</div> 
    </div> 
</body> 
</html>

Tenga en cuenta que el contenido podría desaparecer al cambiar el tamaño de la ventana usando esta técnica.

Fuente

2009-11-30 09:27:41 David

Si el contenido aumenta, entonces está oculto. –

Puede usar pure CSS height:100% (donde el 100% es la altura del área visible en la ventana) valores en modo peculiar al no usar DOCTYPE en absoluto o usar HTML-DOCTYPE defectuoso 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 de la <!DOCTYPE.. por completo, todavía tendría el mismo efecto. overflow:hidden declaración en el estilo del cuerpo es deshacerse de la barra de desplazamiento vacía en IE. Pero recuerde: esto es caprichos modo lo que significa que usted está en territorio impredecible, el modelo de caja CSS difiere de un navegador a otro!

Fuente

2009-11-30 09:45:58 Andris

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">&nbsp;</div> 
     <div style="height:25px;background-color:#eee">&nbsp;</div> 
     <div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc">&nbsp;</div> 
    </div> 
</body> 
</html>

Tal vez esto podría funcionar ?! Pero no sé qué pasa si hay que silenciar el texto ...

Fuente

2009-11-30 09:52:23 Haiko

Simplemente no te preocupes si tu objetivo es que el color llene el fondo.

Establezca el color del div externo, y deje que el tercero cambie el tamaño de su altura como lo desee a medida que el contenido entre.

<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">&nbsp;</div> 
     <div style="height:25px;background-color:#eee">&nbsp;</div> 
     <div style="">&nbsp;</div> 
    </div> 
</body> 
</html>

Fuente

2009-11-30 10:02:18 Kales

La propiedad 'height: 100%;' instruirá a los navegadores a tomar el 100% del espacio de pantalla disponible para ese div en particular, lo que significa que su navegador verificará el tamaño del espacio de navegación y lo devolverá al motor de CSS sin verificar si hay elementos dentro de él.

La única solución que veo encajar aquí es utilizar la solución provista por David para usar 'position: absolute; abajo: 0; ' para ese div.

Fuente

2009-11-30 10:12:00

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;">&nbsp;</div> 
      <div style="width:100%;height:25px;background-color:#eee;">&nbsp;</div> 
      <div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;">&nbsp;</div> 
     </div> 
    </body> 
</html>

Fuente

2009-11-30 10:36:45

Aquí es una solución Litle jQuery 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"> 
     &nbsp;</div> 
    <div id="secondDiv" style="height: 25px; background-color: #eee"> 
     &nbsp;</div> 
    <div id="thirdDiv" style="background-color: #ccc;"> 
     &nbsp;a</div> 
</div> 
</body> 
</html>

Fuente

2009-11-30 10:39:27 Jronny

Esto inicializa la altura del div cuando se carga la página. También puede ser necesario agregar el código de Tatu Ulmanen para que la dimensión de div se modifique después de cambiar el tamaño de cada ventana. – Jronny

$(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; 

    }); 
});

poner lo siguiente en en su etiqueta script o externo javascript luego cambie

cuando cambie el tamaño de la ventana ... se ajustará automáticamente a su altura al espacio disponible en la parte inferior. Podrías tener tantos divs como quieras pero solo puedes tener un elástico dentro de ese padre. podía ser molestado para calcular múltiples elásticos :) Espero que ayuda

Fuente

2010-01-06 16:43:48 Val

Funciona muy bien aunque necesité usar outerHeight/outerWidth en lugar de la altura/ancho regular. – Jamie

¿Cómo compensarías esto? – Chozen

$(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 se cambia el tamaño ....

Fuente

2012-01-10 08:33:36

¿Cómo aplicar 100% de altura a div?

Respuesta

Cuestiones relacionadas