¿Cómo hacer div 100% de altura en relación con el elemento primario?

Me quedé con algo como a continuación. Necesito hacer derecha-top div 100% de altura (su bgcolor cubrirá la altura completa del div principal).¿Cómo hacer div 100% de altura en relación con el elemento primario?

<body> 
    <div id="main" style="width: 800px; margin: auto; text-align: left; border: 1px solid #628221; padding: 2px; background-color: #fff;"> 
     <div id="left" style="float: left; width: 600px; background-color: #A7C864;"> 
      <div id="left-top">left-top</div> 
      <div id="left-bottom">left-bottom</div> 
     </div> 
     <div id="right" style="float: right; width: 200px; background-color: #C7E48E;"> 
      <div id="right-top">right-top</div> 
     </div> 
     <div style="clear: both;"></div> 
    </div> 
</body>

Ejemplo de trabajo aquí: http://marioosh.net/lay1.html

Usando la tabla es fácil: http://marioosh.net/lay2.html

Fuente

2011-01-21 marioosh

Incluso intentar esto sugiere que puede que no entiendas de qué se tratan los div. Si quieres hacer eso, usa tabla, no div's. Si configuras la altura de div principal a la altura de la izquierda de div, entonces puedes poner div al 100%, pero eso es tonto porque obviamente puedes enviar la altura correcta de div. – Myforwik

Entonces, dime para qué sirve Div's? – marioosh

mira esto. Estoy seguro de que ayudarán. [question1] (http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-height) [question2] (http: //stackoverflow.com/questions/485827/css-100-height-with-padding-margin) – ayush

-2

Es necesario configurar alturas de los elementos primarios para permitir altura de 100%. Si ajusta tanto a la altura del 100% usted debe conseguir el efecto que busca

Fuente

2011-01-21 08:51:02

No necesito que div principal tenga 100% de altura – marioosh

se me puede entender la pregunta (su vínculo con el ejemplo basado en tablas no está funcionando), pero suena como si estuvieras tratando de crear dos columnas con la misma altura. Existen varias técnicas que se pueden utilizar, aquí hay tres de ellos:

puede dar a cada DIV un gran acolchado inferior, y un margen igual de grande, pero negativo, inferior.
```
#main { 
    overflow: hidden; 
} 
#left, #right { 
    float: left; 
    padding-bottom: 1000em; 
    margin-bottom: -1000em; 
} 
```
Esta solución no es sin sus problemas; si intenta hacer un enlace a un elemento en una de las columnas (por ejemplo, tiene un elemento en una de las columnas con id=foo y lo vincula al mypage.html#foo), el diseño se romperá. También es difícil agregar bordes inferiores usando esta técnica.

Ejemplo completo de Natalie Downe: http://natbat.net/code/clientside/css/equalColumnsDemo/10.html
Usted puede dar a una de las columnas de un margen derecho negativo, y el otro de una frontera muy amplia izquierda.
```
#left, #right { 
    float: left; 
} 
#left { 
    background: red; 
    width: 200px; 
    margin-right: -200px; 
} 
#right { 
    border-left: 200px solid red; 
} 
```
Más información sobre Smashing Magazine: http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
Usted puede fingir dando #main una imagen de fondo que incluye el fondo de ambas columnas. Esta técnica se conoce como "Faux Columns" y es útil cuando desea fondos complejos, o un borde decorativo entre las columnas.

Más información sobre A List Apart: http://www.alistapart.com/articles/fauxcolumns/

Como un comentarista señaló en la pregunta, también se puede utilizar una tabla. Sin embargo, a menos que esté mostrando datos tabulares, TABLE no es el elemento HTML apropiado.

Fuente

2012-02-05 20:26:16 georgebrock

Así que todos estos hack/margin hacks con divs para emular mal algo que hemos estado haciendo durante más de 15 años utilizando tablas es el elemento HTML "apropiado"? Impar... – bfritz

¿Cómo hacer div 100% de altura en relación con el elemento primario?

Respuesta

Cuestiones relacionadas