Establecer la altura de un div en HTML con CSS

Esta es la respuesta más correcta que te podemos dar, pero estúdiala pausadamente y valora si se puede adaptar a tu trabajo.

Solución:

Ejem…

La respuesta breve a su pregunta es que debe establecer la altura del 100 % para el cuerpo y la etiqueta html, luego establezca la altura del 100 % en cada elemento div que desea que sea el 100 % de la altura de la página.

En realidad, el 100 % de la altura no funcionará en la mayoría de las situaciones de diseño; esto puede ser corto, pero no es una buena respuesta. Diseños de “cualquier columna más larga” en Google. La mejor manera es poner las columnas izquierda y derecha dentro de un envoltorio div, haga flotar las columnas izquierda y derecha y luego haga flotar el envoltorio, esto hace que se estire a la altura de los contenedores internos, luego configure la imagen de fondo en el envoltorio externo. Pero tenga cuidado con los márgenes horizontales en los elementos flotantes en caso de que obtenga el “error flotante de doble margen” de IE.

Prueba esto:

html, body,
#left, #right 
  height: 100%


#left 
  float: left;
  width: 25%;

#right 
  width: 75%;

  
    

      Content
    
    

      Content
    
  

Algunos navegadores admiten tablas CSS, por lo que puede crear este tipo de diseño utilizando los distintos CSS display: table-* valores. Hay más información sobre las tablas CSS en este artículo (y en el libro del mismo nombre) de Rachel Andrew: Todo lo que sabes sobre CSS es incorrecto

Si necesita un diseño coherente en navegadores más antiguos que no admiten tablas CSS, debe hacer dos cosas:

1. Haga que su elemento de “fila de tabla” borre sus elementos flotantes internos.

   La forma más sencilla de hacer esto es establecer overflow: hidden que se encarga de la mayoría de los navegadores, y zoom: 1 para desencadenar el hasLayout propiedad en versiones anteriores de IE.

   Hay muchas otras formas de borrar flotantes, si este enfoque causa efectos secundarios no deseados, debe consultar la pregunta sobre qué método de ‘clearfix’ es mejor y el artículo sobre cómo tener un diseño para otros métodos.

2. Equilibre la altura de los dos elementos de “celda de tabla”.

   Hay dos formas en las que podría abordar esto. Puede crear la apariencia de alturas iguales configurando una imagen de fondo en el elemento “fila de la tabla” (la técnica de las columnas falsas) o puede hacer que las alturas de las columnas coincidan dando 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 al contenido dentro de sus columnas (por ejemplo, si una columna contenía

   y te vinculaste a #foo)

Aquí hay un ejemplo que usa 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;

  
Right column content
  
Left column content


  
Right column content
  
Left column content

Esta demostración de Barcamp de Natalie Downe también puede ser útil para descubrir cómo agregar columnas adicionales y un buen espacio y relleno: Columnas de igual altura y otros trucos (también es donde aprendí por primera vez sobre el truco de margen/relleno para equilibrar las alturas de las columnas)

Acuérdate de que tienes la capacidad de decir si te fue preciso.

---

---

Utiliza Nuestro Buscador