cambiar - Establecer una altura de div en HTML con CSS

html div altura

Question

Estoy tratando de diseñar una página 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 en el lado derecho casi siempre será más pequeño que el de la izquierda. Me gustaría que el div de la derecha siempre sea lo suficientemente alto como para llegar al separador de la fila debajo de él. ¿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 es muy parecido a una mesa y que una mesa real sería una buena elección. Pero mi página "real" eventualmente será menos parecida a una mesa, ¡y solo me gustaría dominar esta tarea!

Además, por alguna razón, cuando creo / edito mis publicaciones en IE7, el código aparece correctamente en la vista de vista previa, pero cuando realmente publico el mensaje, el formato se elimina. La edición de mi publicación en Firefox 2 parece haber funcionado, FWIW.

Otra edición: Sí, no acepte 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 a los que me han dirigido.

Answer 1

La respuesta breve a su pregunta es que debe establecer la altura del 100% en la etiqueta body y html, luego configure la altura al 100% en cada elemento div que desee para hacer el 100% del alto de la página.

Answer 2

Tuve el mismo problema en mi sitio ( plug desvergonzado ).

Tenía la sección de navegación "flotante: derecha" y el cuerpo principal de la página tiene una imagen de fondo de aproximadamente 250 píxeles alineada a la derecha y "repetir-y". Luego agregué algo con "claro: ambos" a él. Aquí está la propiedad W3Schools y CSS clear .

Puse el claro en la parte inferior de la página "div" clasificada. La fuente de mi página se ve algo así.

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 :)

Answer 3

Un diseño de 2 columnas es un poco difícil de trabajar 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 propias 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. Haz que este fondo sea tan grande como lo necesites (si es un color sólido, solo ponlo a 1 píxel de alto) y haz que repita-y. AListApart tiene una gran guía sobre lo que se necesita para que funcione.

http://www.alistapart.com/articles/fauxcolumns/

Answer 4

Aquí hay un ejemplo de columnas de altura igual - Columnas de altura iguales - revisitadas

También puede consultar la idea de "Faux Columns" - Faux Columns

No vayas por la ruta de la mesa. Si no se trata de datos tabulares, no lo trates como tal. Es malo para el acceso y la flexibilidad.

Answer 5

Puedo pensar en 2 opciones

1. Use javascript para cambiar el tamaño de la columna más pequeña en la carga de la página.
2. Fake the equal heights estableciendo el background-color de background-color para la columna en el contenedor <div/> lugar ( <div class="separator"/> ) con repeat-y

Answer 6

Renuncié estrictamente a 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);

Answer 7

Basta con usar el width propiedad css para hacerlo.

Aquí hay un ejemplo:

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>

Answer 8

Ejem...

La respuesta breve a su pregunta es que debe establecer la altura del 100% en la etiqueta body y html, luego configure la altura al 100% en cada elemento div que desee para hacer el 100% del alto de la página.

En realidad, el 100% de altura no funcionará en la mayoría de las situaciones de diseño; puede ser corto, pero no es una buena respuesta. Diseños de Google "cualquier columna más larga". La mejor manera es colocar los cols izquierdos y derechos dentro de un divisor envoltorio, flotar los colgantes izquierdo y derecho y luego hacer flotar el envoltorio, esto lo estira a la altura de los contenedores internos, y luego establecer la imagen de fondo en el envoltorio externo. Pero tenga cuidado con los márgenes horizontales de los elementos flotantes en caso de que obtenga el IE "error de flotador de doble margen".

Answer 9

Esto debería funcionar para usted: establezca la altura al 100% en su CSS para los elementos html y body . A continuación, puede ajustar la altura a sus necesidades en el div .

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
} 

Answer 10

Solo trato de ayudar aquí para que el código sea más legible.
Recuerde que puede insertar fragmentos de código haciendo clic en el botón en la parte superior con "101010". Simplemente ingrese su código, luego 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>

Answer 11

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>

Answer 12

Algunos navegadores son compatibles con tablas CSS, por lo que podría crear este tipo de diseño con varias display: table-* CSS display: table-* values. Hay más información sobre tablas CSS en este artículo (y el libro del mismo nombre) por Rachel Andrew: Todo lo que sabes sobre CSS es incorrecto

Si necesita un diseño consistente en navegadores antiguos que no son compatibles con tablas CSS, debe hacer dos cosas:

1. Haga que su elemento "fila de tabla" borre sus elementos flotados internos.

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

   Hay muchas otras maneras de limpiar flotadores, si este enfoque causa efectos secundarios indeseables, debe verificar la pregunta qué método de ''clearfix'' es el mejor y el artículo sobre cómo tener el diseño para otros métodos.

2. Equilibre la altura de los dos elementos de "celda de tabla".

   Hay dos formas de acercarte a esto. O bien puede crear la apariencia de alturas iguales configurando una imagen de fondo en el elemento "fila de la mesa" (la técnica de columnas falsas ) o puede hacer que las alturas de las columnas coincidan dándole a cada una un relleno grande e igualmente un margen negativo grande.

   Faux columns es el enfoque más simple y funciona muy bien cuando se fija el ancho de una o ambas columnas. La otra técnica funciona mejor con columnas de ancho variable (basadas en porcentajes o unidades em) pero puede causar problemas en algunos navegadores si se vincula directamente al contenido dentro de sus columnas (por ejemplo, si una columna contiene <div id="foo"></div> y tu #foo a #foo )

Aquí hay un ejemplo usando 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 altura iguales y otros trucos (también es donde aprendí por primera vez sobre el margen / el truco de relleno para equilibrar las alturas de las columnas)

Answer 13

No es necesario escribir su propio CSS, hay una biblioteca llamada "Bootstrap css" llamando a eso en su sección de encabezado de HTML, podemos lograr muchos estilos, aquí hay un ejemplo: si desea proporcionar dos columnas seguidas, puede simplemente Haz lo siguiente:

<div class="row">
  <div class="col-md-6"></div>
  <div class="col-md-6"></div>
</div>

Aquí md significa dispositivo medio, puede usar col-sm-6 para dispositivos más pequeños y col-xs-6 para dispositivos extra pequeños