¿Cómo se mide el tamaño de la altura de un div a su altura de contenedor utilizando CSS?cómo dimensionar la altura de un div a su altura de contenedor, usando CSS?
<div class='container'><br>
<div style='display: block; height: 500px'>left</div><br>
<div id='to-be-sized' >right</div><br>
</div>
No se pudo establecer la altura del elemento contenido en altura: 100%;
, ya que el contenedor tiene 'altura: auto' modo' altura: 100% '' se vuelve a los auto' – Quentin
lo tomo altura:.? automático es el valor predeterminado para un recipiente que no tiene la altura explícita establecer – AJM
Sí (es decir el defecto y stackoverflow no le gusta hacer tres observaciones de carácter) – Quentin
Si mi comprensión es correcta y la altura predeterminada de un div donde no se especifica altura es automática, entonces esto no es posible sin establecer una altura explícita en el div que contiene. Si se establece una altura explícita en el div que contiene, entonces height: 100% en el div contenido significará que crece hasta la altura del contenedor.
Parece que usted está tratando de obtener columnas igual altura. Puede usar el método fauxcolumns donde se utiliza una imagen de fondo para simular la misma altura. Hay otros métodos por ahí.
Debo testificar que este es el método más simple y que tiene el mejor soporte para navegadores. – invot
Es algo complicado de hacer, no hay un mejor enfoque claro, pero hay algunos más comunes. Si suponemos que lo que REALMENTE necesita es que la altura de la columna de la derecha sea (o parezca) equivalente a la altura de la columna de la izquierda, puede utilizar cualquiera de las técnicas utilizadas con frecuencia para obtener columnas de igual altura. This piece contiene algunos trucos para obtener el aspecto y el comportamiento correctos. Recomiendo leerlo para ver si resuelve tu problema.
El otro enfoque utiliza Javascript para determinar la altura del contenedor y establecer su columna de la derecha para eso. Esa técnica se ha discutido en SO here. Siempre que el tamaño de su contenedor no sea lo único que determine el tamaño de su contenedor externo, ese debería ser un enfoque válido (si ese no es el caso, tendrá un problema de huevo de gallina que podría causar un comportamiento extraño).
http://www.alistapart.com/articles/fauxcolumns/ <= Artículo original que describe la técnica de Faux Columns con la que se enlaza, que es lo que realmente solicita la publicación principal;) –
Código de ejemplo, debe comenzar desde el elemento html para poder usar la altura flexible en los contenedores.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100% Test</title>
<style type="text/css">
html, body, #inner { height: 100% }
#inner { border: 4px blue solid }
#container { height: 200px; border: 4px red solid }
</style>
</head>
<body>
<div id="container">
<div id="inner">
lorem ipsum
</div>
</div>
</body>
</html>Puede indicarle al contenedor div que se muestre como una tabla y tener el div interno para que se muestre como una celda de la tabla.
El HTML
<body>
<div id="wrap">
<div id="header">
<h1>
My Header</h1>
</div>
<div id="main">
<ul id="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="primaryContent">
</div>
</div>
<div id="footer">
<h1>
My Footer</h1>
</div>
</div>
El CSS
#wrap
{
width: 800px;
margin: auto;
}
#header
{
background: red;
}
#main
{
display: table;
}
#nav
{
background: gray;
width: 150px;
display: table-cell;
}
#primaryContent
{
background: yellow;
padding: 0 .5em;
display: table-cell;
}
Correcciones para IE
#wrap
{
width: 800px;
margin: auto;
}
#header, #footer
{
background: red;
}
#main
{
background: url(../bg.png) repeat-y;
}
#nav
{
background: gray;
width: 150px;
float: left;
}
#primaryContent
{
background: yellow;
margin-left: 150px;
padding: 0 .5em;
}
Hay una manera de hacer esto si quieres pasar a ser usin g jQuery. Como solicitó CSS, esta podría no ser una opción disponible para usted, pero si puede utilizarla, hará exactamente lo que quiera.
$(divToResize).css('height',$(container).innerHeight());
$ (divToResize) es el selector para el DIV que desea que coincida con la altura de su contenedor y $ (contenedor) es lógicamente el recipiente cuya altura que desea obtener.
Esto funcionará independientemente de si la altura del contenedor está especificada en CSS o no.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.container{
position:relative;
background-color:#999;
}
#to-be-sized{
position:absolute;
top:0;
height:100%;
background-color:#ddd;
}
</style>
<body>
<div class='container'>
<br>
<div style='display: block; height: 500px'>left</div>
<br>
<div id='to-be-sized' >right</div><br>
</div>
</body>
</html>
Puede:
o
Su selección :)
Esta respuesta me hizo sonreír =). –
Durante años y años, muchas personas han odiado las tablas, y las tablas anuales han sido la única solución confiable para muchos problemas. El estándar de CSS se ha roto desde el principio. Un problema tan simple debería ser simple, pero no lo es. – GetFree
hice algo similar a KyokoHunter:
$('div.row').each(function(){
var rowHeight = $(this).innerHeight();
$(this).children('div.column').css('height',rowHeight);
});
Esto pasa a través de todas las filas de una "mesa" div y hace todo lo alto de los partidos, siempre y cuando la divs se clasifican en consecuencia.
Sé que esto fue respondida hace siempre, pero cuando me encuentro con este problema hoy en día, utilizo Flex Box. Es impresionante. Ver A Complete Guide to Flexbox por Chris Coyier
.parent {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
}
.child {
flex-grow: 1;
}
.child1 {
min-height: 200px;
background-color: #fee;
}
.child2 {
background-color:#eef;
}<div class="parent">
<div class="child child1">Child 1</div>
<div class="child child2">Child 2</div>
</div>El módulo
Flexbox Layout(Recuadro flexible) tiene como objetivo proporcionar una manera más eficiente para diseñar, alinear y distribuir el espacio entre los elementos en un contenedor, incluso cuando su tamaño es desconocido y/o dinámico (por lo tanto, la palabra "flex").La idea principal detrás del diseño de flex es que el recipiente tenga capacidad de alterar sus elementos ancho/alto (y el orden) para llenar mejor el espacio disponible (en su mayoría para dar cabida a todo tipo de dispositivos de visualización y tamaños de pantalla) . Un contenedor flexible expande los artículos para llenar el espacio libre disponible, o los encoge para evitar el desbordamiento.
más importante, el diseño FlexBox es la dirección-agnóstico en contraposición a los diseños regulares (bloque que se basa verticalmente y en línea que se basa horizontalmente). Mientras que los que funcionan bien para páginas, carecen de la flexibilidad (sin juego de palabras) para soportar aplicaciones grandes o complejos (especialmente cuando se trata de la orientación cambiante, cambio de tamaño, estiramiento, de contracción, etc.).
Mejor publicar el código actual y citar el enlace; de esa manera, si el sitio deja de funcionar, el código seguirá estando disponible. – Wex
Los archivos CSS utilizan la función 'relleno' para determinar la altura y la profundidad de los contenedores. Para cambiar la altura del campo contenedor, inserte de forma simple los campos de relleno para los contenedores especificados.
El fragmento de código siguiente es un ejemplo de la CSS se utiliza para una clase de contenedor (que iba a encontrar esto como en el archivo html.
.container{padding-top:100px;padding-bottom:50px}header
no saben que esto es posible, pero interesado en cualquiera sin respuestas – Jon