CSS: ¿Cómo hacer que el flotador izquierdo div ajuste la altura de forma dinámica?

¿Cómo puedo hacer que mi div izquierdo flotante con un contenido estático ajuste automáticamente su altura a la misma altura del div flotante derecho con un contenido dinámico?CSS: ¿Cómo hacer que el flotador izquierdo div ajuste la altura de forma dinámica?

Así que lo que estoy tratando de lograr es que el div izquierda y derecha tendrá la misma altura (div izquierda ajustando automáticamente a la altura de la div derecha)

A continuación se muestra el código de ejemplo.

Gracias de antemano :)

Saludos, Marcos

<html> 
<head> 
    <style type="text/css"> 
     body { 
      font-family:verdana; 
      font-size:12px; 
     } 
     .parent { 
      border:1px solid red; 
      width:530px; 
      /*min-height:100%;*/ 
      padding:5px; 
     } 
     .left { 
      border:1px solid blue; 
      width:200px; 
      float:left; 
      position:relative; 
      padding:3px; 
     } 
     .right { 
      border:1px solid green; 
      width:300px; 
      float:right; 
      position: relative; 
      padding:3px; 
     } 
     .clr { clear:both; } 
     .footer { 
      border:1px solid orange; 
      position: relative; 
      padding:3px; 
      margin-top:5px; 
     } 
    </style> 
</head> 
<body> 
    <div class="parent"> 
     <div class="left">float left div here only static content</div> 
     <div class="right"> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
     </div> 
     <div class="clr"></div> 
     <div class="footer">Footer here</div> 
    </div> 
</body> 
</html>

Fuente

2010-02-25 marknt15

Aquí es la solución CSS de trabajo (gracias a pdr para el link):

<html> 
<head> 
    <style type="text/css"> 
     html, body { 
      font-family:verdana; 
      font-size:12px; 
     } 
     .parent { 
      border:1px solid red; 
      width:530px; 
      padding:5px; 
      overflow:hidden; 
     } 
     .left { 
      border:1px solid blue; 
      width:200px; 
      float:left; 
      position:relative; 
      padding:3px; 
     } 
     .right { 
      border:1px solid green; 
      width:300px; 
      float:right; 
      position: relative; 
      padding:3px; 
     } 

     /* a solution but doesn't work in IE */ 
     /* 
     .left, .right { 
      min-height: 100px; 
      height: auto; 
     } 
     */ 

     .left, .right { 
      padding-bottom:8000px; 
      margin-bottom:-8000px; 
      background:none repeat scroll 0 0 lightblue; 
     } 

     .clr { clear:both; } 
     .footer { 
      border:1px solid orange; 
      position: relative; 
      padding:3px; 
      margin-top:5px; 
     } 
    </style> 
</head> 
<body> 
    <div class="parent"> 
     <div class="left">float left div here only static content</div> 
     <div class="right"> 
      float right div dynamic content here<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
     </div> 
     <div class="clr"></div> 
     <div class="footer">Footer here</div> 
    </div> 
</body> 
</html>

Fuente

2010-02-25 07:56:36 marknt15

No puedo establecerlo como una respuesta aceptada. Indica "Puede aceptar su respuesta en 21 horas". Supongo que esperaré :) – marknt15

Esta solución solo funciona en IE8, FF, Chrome, Safari y Opera. Acabo de descubrir que esto no funciona en IE 7. Necesito encontrar otra solución o simplemente rediseñar toda la página. (-_-) – marknt15

Si yo fuera usted, yo uso un simple truco de CSS. Me asigno la altura de .Left y .RIGHT en una clase css como esta nota

.Left, .Right 
{ 
    min-height: 200px; /*because of .Left*/ 
    height: auto; 
}

que el código anterior utiliza cada vez que su altura va más de 200 píxeles a continuación, se anulará el valor de 200 px.

esperanza esta ayuda

La respuesta completa con Javascript

<script> 
function increaseHeight() 
{ 
    Document.getElementById('LeftDivID').style.height = Document.getElementById('RightDivID').style.height; 
} 
</script>

y hay que llamarlo siempre youfinished el aumento del tamaño del div derecho

Fuente

2010-02-25 05:30:47

Intenté su solución BU t es incorrecto Aquí está la captura de pantalla: http://i.imgur.com/UzIoY.jpg Si el div correcto agrega dinámicamente un contenido, entonces la altura del div izquierdo no se ajustará más. – marknt15

es porque estableces el Derecho a Automático (quiero decir que lo estás aumentando automáticamente y deseas aumentar automáticamente un elemento irrelevante. Para hacer tal cosa, debes usar javascript. –

@Mark - He editado mi respuesta con javascript che4ck –

Hay una serie de opciones que se muestran aquí

http://www.ejeliot.com/blog/61

En general, creo que debería preguntarse si realmente quiere dos columnas. Podría ser que esté mejor con su contenido estático en el div principal y su contenido dinámico en un div infantil ([Editar] o viceversa).

Fuente

2010-02-25 05:39:38 pdr

Gracias a mucho pdr. Publicaré mi solución. Su enlace me llevó a esta solución: http://www.ejeliot.com/samples/equal-height-columns/example-6.html – marknt15

probar siguiente código, he intentado con Firefox, pero esperemos que trabajaría en la mayoría de los navegadores

<html> 
<head> 
    <style type="text/css"> 
     body { 
      font-family:verdana; 
      font-size:12px; 
     } 
     .parent { 
      border:1px solid red; 
      width:530px; 
      /*min-height:100%;*/ 
      padding:5px; 
     } 
     .parent_new { 
      border:1px solid red; 
      width:530px;    
      padding:5px; 
      display: table-cell; 
     } 
     .row_level 
     { 
      display:table-cell; 
     } 
     .cell-level { 
      display:table-cell; 
      border:1px solid red; 
     } 
     .left { 
      border:1px solid blue; 
      width:200px; 
      float:left; 
      position:relative; 
      padding:3px; 
     } 
     .left { 
      border:1px solid blue; 
      width:200px; 
      float:left; 
      position:relative; 
      padding:3px; 
      display:table-row; 
     } 
     .right { 
      border:1px solid green; 
      width:300px; 
      float:right; 
      position: relative; 
      padding:3px; 
     } 
     .clr { clear:both; } 
     .footer { 
      border:1px solid orange; 
      position: relative; 
      padding:3px; 
      margin-top:5px; 
     } 
    </style> 
</head> 
<body> 
    <div class="parent_new"> 
     <div class="row_level"> 
     <div class="cell-level">float left div here only static content 
     </div> 
     <div class="cell-level"> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
     </div> 
     </div> 
     <div class="clr"></div> 
     <div class="footer">Footer here</div> 
    </div> 
</body> 
</html>

Fuente

2010-02-25 05:45:20 shahjapan

Lamentablemente probé esto pero no funciona en los navegadores IE. Gracias :) :) – marknt15

A List Apart tiene algunos excelente artículo sobre este tema, por ejemplo Faux Columns y Multi-column layouts climb out of the box

Fuente

2010-02-25 07:11:41 Marius

CSS: ¿Cómo hacer que el flotador izquierdo div ajuste la altura de forma dinámica?

Respuesta

Cuestiones relacionadas