Cómo tener la altura de la tabla html = altura de div principal cuando la altura de div no está establecida

Tengo una tabla html, dentro de un div. La altura del div se basa en otros elementos en el div.Cómo tener la altura de la tabla html = altura de div principal cuando la altura de div no está establecida

¿Cómo puedo hacer que la altura de la tabla sea igual a la altura de su div principal?

(altura de la mesa: 100% no funcionará porque la altura del div no se ha establecido)

Actualización: necesito para apoyar IE6,7,8 por lo que las recomendaciones CSS deben ser entendidos por estos navegadores.

Fuente

2010-04-13 Tony_Henrich

¿Por qué no puede haber una altura en el div principal? – quoo

Porque no quiero restringir la altura si alguien cambia el tamaño de la fuente o si hay más contenido. La altura debe ajustarse para adaptarse a los contenidos. –

-1

Una altura de tabla del 100% debe llenar cualquier espacio que tenga disponible en su contenedor div principal. Si no puede establecer la altura en el elemento primario div, intente utilizar height="100%" en la tabla en lugar de CSS. Lo sé, no es semánticamente correcto, pero las tablas funcionan a veces un poco extrañas con divs.

Fuente

2010-04-13 19:34:25

Intenté IE8 y FF 3.6 y no funcionó –

Tienes un docType válido en tu página ¿verdad? –

Casi imposible, porque el procesador no puede saber cuánto debe ser el 100%.

Una solución muy sucia: Agregue display:table al div y display:table-row-group a la tabla. No hay que esperar demasiado ... :)

Fuente

2010-04-13 19:37:28 fuxia

No tuvo ningún efecto en IE8. En FF se expandió un poco más pero no tomó la altura completa. –

Intente utilizar position:relative y min-height:100%;

Mb incluso posinion:absolute, top:xxx, bottom:xxx, right:xxx y left:xxx - postulación y height:auto.

Fuente

2010-04-13 19:43:36 TRAVA

Para lograr lo que está hablando con solo CSS puede ser bastante difícil. Podría intentar usar javascript, jQuery o cualquier otro host de otras bibliotecas de JavaScript para obtener el alto del div principal y luego aplicarlo como la altura de la tabla. Mira el ejemplo a continuación. No importa cuánto texto se agregue, establece la altura de la tabla de forma dinámica en función del div principal. No es javascript discreto, pero esto debería comenzar.

<html> 
    <head> 
     <title>Table Height set via jQuery</title> 
     <script src="jquery.js" type="text/javascript" charset="utf-8"></script> 

     <script type="text/javascript" charset="utf-8"> 
      $(document).ready(function(){ 
       var divHeight = $('div.full').height(); 
       $('table.column_2').css("height", divHeight + "px"); 
       $('table.column_2 .parentDiv').text(divHeight); 
       var tableHeight = $('table.column_2').height(); 
       $('table.column_2 .tableHeight').text(tableHeight); 
      }); 
     </script> 
     <style type="text/css" media="screen"> 
      div.full { 
       width:960px; 
       float:left; 
       } 
      div.column_1 { 
       width:450px; 
       padding:0 10px; 
       float:left; 
       margin-right:10px; 
       background-color:#eee; 
      } 
      table.column_2 { 
       width:470px; 
       float:left; 
       background-color:#ddd; 
      } 
     </style> 
    </head> 

    <body> 
     <div class="full"> 
      <div class="column_1"> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim 
        id est laborum. 

       </p> 

      </div> 
      <table class="column_2"> 
       <thead> 
        <tr> 
         <th>Table Height</th> 
         <th>Parent Div Height</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td class="tableHeight"></td> 
         <td class="parentDiv"></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </body> 
</html>

Fuente

2010-04-14 00:54:52 mrmrs

Malas noticias, no se puede. Hay tantos hacks para ellos y ninguno de ellos es una buena solución. Javascript como se describe es la única forma de hacerlo, pero se necesita demasiado ancho de banda para cosas pequeñas, pero es útil si planea usar jQuery para otras funciones.

CSS 3 tiene nuevas reglas que le permiten tener esa flexibilidad pero muchos navegadores no ofrecen soporte completo de CSS 3. Como querías IE6/7, no tienes suerte.

Si es REALMENTE tan importante, está bien usar tablas mínimas. No permita que otros le digan que está mal cuando funciona para prácticamente todos los navegadores de escritorio e incluso los navegadores móviles funcionan bien siempre que no estén anidados a no más de dos niveles de profundidad.

Otra solución es crear diseños de diseño que no dependan de verificar las alturas de otros DIV.

Fuente

2010-09-15 06:10:10 netrox

Cómo tener la altura de la tabla html = altura de div principal cuando la altura de div no está establecida

Respuesta

Cuestiones relacionadas