Desplazamiento de la celda en una altura del 100% TABLA

Lo siento si esto ya fue respondido, pero es un poco difícil buscar algo con "100% de altura".Desplazamiento de la celda en una altura del 100% TABLA

Mi problema es que necesito un diseño de tabla de altura del 100% debido al cambio automático de tamaño de celda realizado por el navegador, que no me quiero escribir por razones obvias.

Se diferencia de otros "100% de problemas", en que necesito que algunas celdas se peguen en la parte superior y otras en la inferior, y que el medio cambie de tamaño por el navegador para ocupar el espacio restante.

Ese tipo de trabajo, el problema ocurre cuando necesito que la parte central contenga cosas desbordadas, y obviamente quiero desbordamiento: automático allí para permitir al usuario a través de esas cosas. Funciona en WebKit, en Firefox, no, otros no probados. Aquí está el caso de prueba.

<html> 
<head> 
    <style> 

     body, html { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     table { 
      height: 100%; 
      width: 200px; 
      border: 0; 
     } 

     .fill { 
      background-color: red; 
     } 

     .cont { 
      overflow: auto; 
      height: 100%; 
     } 

    </style> 

</head> 
<body> 
    <table> 
     <tr> 
      <td style="height:50px"></td> 
     </tr> 
     <tr> 
      <td style="height:100px"></td> 
     </tr> 
     <tr> 
      <td class="fill"> 
       <div class="cont"> 
        An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td style="height:100px"></td> 
     </tr> 
    </table> 
</body>

Fuente

2009-10-19 skrat

Creo que debe volver a formular su pregunta. Por el momento, parece como si estuvieras diciendo: "Quiero lograr X, así que tengo que usar Y ... ¿cómo puedo hacer que Y funcione?" Creo que deberías estar preguntando "Quiero lograr X ... cuál es la mejor manera de lograr mi objetivo". – codeinthehole

Muchos años después y esto aún no se ha resuelto :( – stej

-2

no estoy seguro de entender por qué es necesario utilizar una tabla. Si su objetivo es simplemente crear un diseño que abarque siempre toda la altura de la ventana del navegador cuando el contenido en el medio es pequeño y se ajusta verticalmente cuando el contenido aumenta, entonces CSS es todo lo que necesita.

<html> 

<head> 
<style> 

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    height:100%; /* Necessary for IE 
    position:relative; 
    background-color: red; /* Set equal to background-color of #body. This creates the illusion that your middle content spans the entire height of the page */ 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
    background-color: red; /* Set equal to background-color of #container */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
} 

</style> 
</head> 

<body> 

<div id ="container"> 
    <div id="header"></div> 
    <div id="body"> 
    This is resizable. 
    </div> 
    <div id="footer"></div> 
</div> 

</body> 

</html>

Refer to this guide de cómo hacerlo (todo lo que hice fue editar los colores de fondo de los contenedores y cajas divs para crear la ilusión de que el contenido medio de altura se extiende por 100%. Ajustar el ancho de CSS, etc ... para adaptarse a su diseño).

Fuente

2010-01-17 15:36:54 Choy

Me acaba de responder a una pregunta como esta hoy y creo que usted está buscando lo mismo, here es la pregunta en sí misma y mi respuesta:

HTML

<div class="container"> 
    <div class="twenty"> 
     fixed height 20 
    </div> 
    <div class="fifty"> 
     fixed height 50 
    </div> 
    <div class="hundred"> 
     fixed height 100 
    </div> 
    <div class="auto"> 
     <div class="content"> 
      .... 
     </div> 
    </div> 
    <div class="fifty" style="border-bottom:none; border-top:1px solid"> 
     fixed height 50 
    </div> 
</div>

CSS

html,body { 
    height:100%; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
} 

.container { 
    width:100%; 
    height:100%; 
} 

.twenty, .fifty, .hundred, .auto { 
    border-bottom:1px solid black; 
} 

.twenty { 
    height:20px; 
} 

.fifty { 
    height:50px; 
} 

.hundred { 
    height:100px; 
} 

.auto { 
    height:100%; 
    overflow:hidden; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    box-sizing:border-box; 
    margin:-120px 0; 
    padding:120px 0; 
} 

.content { 
    float:left; 
    overflow:auto; 
    height:100%; 
} 

.content{ 
    width:100%; 
}

Vista completa: http://jsfiddle.net/8abeU/show/ Fiddle: http://jsfiddle.net/8abeU

Fuente

2012-01-12 02:36:05

funciona, desafortunadamente mi aplicación está estancada en los 90 (Modo curioso IE8) y por lo tanto no se comporta como se esperaba. –

Desplazamiento de la celda en una altura del 100% TABLA

Respuesta

Cuestiones relacionadas