Establecer la altura de un div en HTML con CSS
https://stackoverflow.com/questions/4973
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy intentando diseñar una página similar a una tabla con dos columnas.Quiero que la columna de la derecha se acople a la derecha de la página y esta columna debe tener un color de fondo distinto.El contenido del lado derecho casi siempre será más pequeño que el del lado izquierdo.Me gustaría que el div de la derecha siempre fuera lo suficientemente alto como para alcanzar el separador de la fila debajo.¿Cómo puedo hacer que mi color de fondo llene ese espacio?
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}<div class="separator">
<div class="rightfloat">
Some really short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
<div class="separator">
<div class="rightfloat">
Some more short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>Editar:Estoy de acuerdo en que este ejemplo se parece mucho a una tabla y una tabla real sería una buena elección.Pero mi página "real" eventualmente se parecerá menos a una tabla, ¡y primero me gustaría dominar esta tarea!
Además, por alguna razón, cuando creo/edito mis publicaciones en IE7, el código se muestra correctamente en la vista previa, pero cuando publico el mensaje, el formato se elimina.Editar mi publicación en Firefox 2 parece haber funcionado, FWIW.
Otra edición:Sí, no acepté la respuesta de GateKiller.De hecho, funciona muy bien en mi página simple, pero no en mi página más pesada.Investigaré algunos de los enlaces que me habéis señalado.
Solución
Ejem...
La respuesta corta a su pregunta es que debe establecer la altura del 100% para el cuerpo y la etiqueta html, luego establecer la altura al 100% en cada elemento div que desee para que el 100% sea la altura de la página.
En realidad, el 100% de altura no funcionará en la mayoría de situaciones de diseño; esto puede ser corto pero no es una buena respuesta.Busque en Google diseños de "cualquier columna más larga".La mejor manera es poner las columnas izquierda y derecha dentro de un contenedor. div, haga flotar las columnas izquierda y derecha y luego haga flotar el envoltorio (esto hace que se estire hasta la altura de los contenedores internos) y luego establezca la imagen de fondo en el envoltorio exterior.Pero esté atento a los márgenes horizontales en los elementos flotantes en caso de que obtenga el "error flotante de doble margen" de IE.
Otros consejos
Prueba esto:
html, body,
#left, #right {
height: 100%
}
#left {
float: left;
width: 25%;
}
#right {
width: 75%;
}<html>
<body>
<div id="left">
Content
</div>
<div id="right">
Content
</div>
</body>
</html>Algunos navegadores admiten tablas CSS, por lo que puedes crear este tipo de diseño utilizando distintos CSS. display: table-* valores.Hay más información sobre las tablas CSS en este artículo (y el libro del mismo nombre) de Rachel Andrew: Todo lo que sabes sobre CSS es incorrecto
Si necesita un diseño coherente en navegadores antiguos que no admiten tablas CSS, debe hacer dos cosas:
Haga que su elemento "fila de tabla" borre sus elementos flotantes internos.
La forma más sencilla de hacer esto es establecer
overflow: hiddenque se ocupa de la mayoría de los navegadores, yzoom: 1para desencadenar elhasLayoutpropiedad en versiones anteriores de IE.Hay muchas otras formas de eliminar las carrozas, si este enfoque causa efectos secundarios indeseables, debe consultar la pregunta. ¿Qué método de 'clearfix' es mejor? y el articulo sobre tener diseño para otros métodos.
Equilibre la altura de los dos elementos de la "celda de la tabla".
Hay dos formas de abordar esto.Puede crear la apariencia de alturas iguales configurando una imagen de fondo en el elemento "fila de la tabla" (el técnica de columnas falsas) o puede hacer que las alturas de las columnas coincidan dándole a cada una un relleno grande y un margen negativo igualmente grande.
Las columnas falsas son el enfoque más simple y funcionan muy bien cuando el ancho de una o ambas columnas es fijo.La otra técnica funciona mejor con columnas de ancho variable (basadas en porcentaje o unidades em), pero puede causar problemas en algunos navegadores si vincula directamente el contenido dentro de sus columnas (p. ej.si una columna contiene
<div id="foo"></div>y te vinculaste a#foo)
A continuación se muestra un ejemplo que utiliza la técnica de relleno/margen para equilibrar la altura de las columnas.
html, body {
height: 100%;
}
.row {
zoom: 1; /* Clear internal floats in IE */
overflow: hidden; /* Clear internal floats */
}
.right-column,
.left-column {
padding-bottom: 1000em; /* Balance the heights of the columns */
margin-bottom: -1000em; /* */
}
.right-column {
width: 20%;
float: right;
}
.left-column {
width: 79%;
float: left;
}<div class="row">
<div class="right-column">Right column content</div>
<div class="left-column">Left column content</div>
</div>
<div class="row">
<div class="right-column">Right column content</div>
<div class="left-column">Left column content</div>
</div>Esta demostración de Barcamp de Natalie Downe también puede ser útil para descubrir cómo agregar columnas adicionales y un buen espaciado y relleno: Columnas de igual altura y otros trucos (También es donde aprendí por primera vez sobre el truco del margen/relleno para equilibrar las alturas de las columnas)
Dejé estrictamente CSS y usé un poco de jquery:
var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();
if (leftcol_height > rightcol_height)
rightcol.height(leftcol_height);
else
leftcol.height(rightcol_height);
Aqui hay un ejemplo de columnas de igual altura: Columnas de igual altura: revisadas
También puedes consultar la idea de "Columnas falsas": Columnas falsas
No sigas la ruta de la mesa.Si no son datos tabulares, no los trate como tal.Es malo para la accesibilidad y la flexibilidad.
Tuve el mismo problema en mi sitio (enchufe descarado).
Tenía la sección de navegación "flotar:derecha" y el cuerpo principal de la página tiene una imagen de fondo de aproximadamente 250 píxeles de ancho alineada a la derecha y "repetida".Luego agregué algo con "claro:ambos".Aquí están las W3Schools y el Propiedad clara de CSS.
Coloqué el claro en la parte inferior de la "página" clasificada como div.La fuente de mi página se parece a esto.
body
-> header (big blue banner)
-> headerNav (green bar at the top)
-> breadcrumbs (invisible at the moment)
-> page
-> navigation (floats to the right)
-> content (main content)
-> clear (the quote at the bottom)
-> footerNav (the green bar at the bottom)
-> clear (empty but still does something)
-> footer (blue thing at the bottom)
Espero que eso ayude :)
No es necesario escribir su propio CSS, hay una biblioteca llamada "Bootstrap css" al llamarla en la sección de encabezado HTML, podemos lograr muchos estilos. Aquí hay un ejemplo:Si desea proporcionar dos columnas seguidas, simplemente puede hacer lo siguiente:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-md-6">Content</div>
<div class="col-md-6">Content</div>
</div>Aquí md significa dispositivo mediano. Puede usar col-sm-6 para dispositivos más pequeños y col-xs-6 para dispositivos extra pequeños.
La respuesta corta a su pregunta es que debe establecer la altura del 100% para el cuerpo y la etiqueta html, luego establecer la altura al 100% en cada elemento div que desee para que el 100% sea la altura de la página.
Es un poco difícil hacer funcionar un diseño de 2 columnas en CSS (al menos hasta que CSS3 sea práctico).
Flotar hacia la izquierda y hacia la derecha funcionará hasta cierto punto, pero no le permitirá extender el fondo.Para que los fondos se mantengan sólidos, tendrás que implementar una técnica conocida como "columnas falsas", que básicamente significa que tus columnas no tendrán una imagen de fondo.Sus 2 columnas estarán contenidas dentro de una etiqueta principal.A esta etiqueta principal se le asigna una imagen de fondo que contiene los 2 colores de columna que desea.Haga que este fondo sea tan grande como lo necesite (si es un color sólido, solo hágalo de 1 píxel de alto) y repítalo.AListApart tiene un excelente tutorial sobre lo que se necesita para que funcione.
Se me ocurren 2 opciones
- Utilice javascript para cambiar el tamaño de la columna más pequeña al cargar la página.
- Finge las alturas iguales configurando el
background-colorpara la columna en el contenedor<div/>en cambio (<div class="separator"/>) conrepeat-y
Solo intento ayudar aquí para que el código sea más legible.
Recuerda que puedes insertar fragmentos de código haciendo clic en el botón en la parte superior con "101010".Simplemente ingrese su código, resáltelo y haga clic en el botón.
Aquí hay un ejemplo:
<html>
<body>
<style type="text/css">
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
</style>
Esto debería funcionar para ti:Establece la altura al 100% en tu CSS para el html y body elementos.Luego puede ajustar la altura según sus necesidades en el div.
html {
height: 100%;
}
body {
height: 100%;
}
div {
height: 100%; /* Set Div Height */
}
Basta con usar la propiedad css. width para hacerlo.
Aquí hay un ejemplo:
<style type="text/css">;
td {
width:25%;
height:100%;
float:left;
}
</style>
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}<div class="separator">
<div class="rightfloat">
Some really short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
<div class="separator">
<div class="rightfloat">
Some more short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>