Tabla 100% de altura dentro de un div absoluto

Tengo una tabla dentro de una div posicionada de manera absoluta. El div se extiende usando la parte superior 0 y la parte inferior 0, y parece que se extiende como se esperaba entre navegadores. (Lo revisé, puse un borde sobre él y se extendió como se esperaba). Ahora, dentro del div tengo una mesa. Quiero que la tabla se extienda en todo el espacio div, y en Google Chrome sí. Pero en Internet Explorer y Firefox no lo es, la tabla se extiende al ancho, pero ignora la propiedad de altura y su altura está determinada por su contenido.Tabla 100% de altura dentro de un div absoluto

¿Hay alguna manera de arreglarlo, o evitarlo de alguna manera?

Aquí está el código:

<div 
    style= 
     "position:absolute; 
     top:40px; 
     left:0px; 
     right:0px; 
     bottom:0px;"> 
    <table 
     width="100%" 
     cellpadding="0" 
     cellspacing="0" 
     style="height:100%;"> 
    </table> 
</div>

Fuente

2010-11-06 Tal

¿Hay alguna razón para usar la tabla dentro de un div que está posicionada absolutamente. – kobe

sí, porque mi div está ahí para determinar la altura. – Tal

la página se estira al tamaño completo de la pantalla, y el div se extiende como se esperaba. la tabla debe extenderse al tamaño completo del div, pero como dije, solo Google Chrome lo entiende. – Tal

definir un height de su div,

<div style="position:absolute; top:40px; left:0px; right:0px; background-color: #f90; bottom:0px; height: 400px"> 
    <table width="100%" cellpadding="0" cellspacing="0" style="height:100%;">  
    </table> 
</div>

Fuente

2010-11-06 15:42:28

ese es exactamente el problema. No quiero definir la altura, porque cambia con el tamaño de la ventana. – Tal

@Tal ver este enlace, 'http: // jsfiddle.net/6bqkL/1 /' está trabajando en firefox, IE y Chrome también. –

y una cosa más, asegúrate de que esta div absoluta esté 'no envuelta' en cualquier div que esté en' position: relative'. –

Tabla 100% de altura dentro de un div absoluto

Respuesta

Cuestiones relacionadas