div Prevenir con display: table-cell se estire

tengo el siguiente código HTMLdiv Prevenir con display: table-cell se estire

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Table-cell issue</title> 
    <style type="text/css"> 
     html, body { height: 100%; } 
     .table 
     { 
      display: table; 
      height: 100%; 
     } 
     .row 
     { 
      display: table-row; 
     } 
     .aside 
     { 
      display: table-cell;   
     } 
     .center 
     { 
      background-color: red; 
      display: table-cell; 
      width: 100%; 
     } 
     .wide 
     { 
      background-color: green; 
      width: 16000px; 
     } 
    </style> 
</head> 
<body> 
    <div class="table"> 
     <div class="row"> 
     <div class="aside"> 
      Left column 
     </div> 
     <div class="center"> 
      <div class="wide">&nbsp;</div> 
     </div> 
     <div class="aside"> 
      Right column 
     </div> 
     </div> 
    </div> 
</body> 
</html>

El problema es que el div.center estira para adaptarse a su contenido, mientras que el div.table está destinado a ocupar la totalidad viewport, y el resto del contenido del div.center debe ser invisible. Ni overflow:hidden ni la configuración de ancho explícito en píxeles (900px, por ejemplo) ayuda.

Estaría muy agradecido por cualquier idea sobre cómo solucionar el problema.

Fuente

2011-02-13 Alexey

Usar table-layout:fixed en la tabla div. Esto desactiva el cambio automático de tamaño de la celda y hará que el centro sea tan ancho como lo permita.

Fuente

2011-02-13 00:07:59 SpliFF

Gracias, funciona perfectamente. ¿Pero puede sugerir cómo forzar div.wide para estirar el 100% de altura de su padre? 'height: 100%' funciona solo en los navegadores Webkit, y el posicionamiento absoluto con 'top: 0; bottom: 0;' causa scroll a pesar de 'overflow: hidden' ... – Alexey

Los problemas que está viendo son causados por el comportamiento único del diseño de la tabla algoritmos. El problema es que HTML4/CSS2 es bastante impreciso sobre lo que debería suceder cuando el desbordamiento y el posicionamiento interactúan con las células principales. La mayoría de los navegadores parecen hacer lo suyo. CSS dice height: 100% solo es válido si el padre tiene una altura explícita así que comienza estableciendo una altura fija en '.center' – SpliFF

' table-layout: fixed' puede causar algunos problemas de ancho en Safari. – Mike

div Prevenir con display: table-cell se estire

Respuesta

Cuestiones relacionadas