Diseño de CSS que llena el espacio disponible

Estoy tratando de hacer un diseño de página web aparentemente simple, pero estoy golpeando una pared.Diseño de CSS que llena el espacio disponible

que había como de hacer todo puramente con CSS (no hay mesas a Muck cosas, y No JavaScript cosas dinámica de cambio de tamaño)

me gustaría tener:

una partida con una altura fija
un pie de página con una altura fija
Barra lateral izquierda con un ancho fijo
Barra lateral derecha con un ancho fijo
El diseño completo siempre ocupa toda la ventana gráfica (es decir si el usuario cambia el tamaño de la ventana, el diseño crece al nuevo tamaño)

Dicho de otra manera:

 

|<    Total width is 100% of viewport    >| 

+--------------------------------------------------------------+ --- 
|     Header with a fixed height     | ^
|--------+-------------------------------------------+---------+  
|  |           |   |  
|  |           |   |  
| Left |           | Right | Total 
| with |  Center grows in height/width  | with | height 
| fixed |  and has scrollbars if necessary  | fixed | is 
| width |           | width | 100% 
|  |           |   | of 
|  |           |   | viewport 
|  |           |   | 
|--------+-------------------------------------------+---------| 
|     Footer with a fixed height     | v 
+--------------------------------------------------------------+ ---

Las partes que me están dando más problemas son

Tener la las barras laterales y el centro tienen una altura igual a la altura de la ventana gráfica menos las alturas del encabezado y pie de página
Teniendo el centro un ancho igual al ancho de la ventana menos el ancho de las dos barras laterales

No tengo ningún problema para que los usuarios tengan un navegador moderno.

Soy consciente de que preguntas similares a este se han preguntado antes, como

hacer un espacio restante relleno div (http://stackoverflow.com/questions/1717564)
Tres filas de diseño CSS sin tablas con fila del medio que llena restante el espacio (http://stackoverflow.com/questions/1703455)
Crear 2 divs, uno toma el espacio restante (http://stackoverflow.com/questions/1717564)

... y la conclusión parece ser que no hay una buena solución. Esas respuestas son algo antiguas, así que espero que alguien sepa el truco ahora.

Sí, soy consciente de que esto parece ser trivial para llevar a cabo usando un <table>, y después de "golpeando mi cabeza contra la pared" que intentó realmente conseguir el diseño utilizando una tabla. Desafortunadamente, con este enfoque, no he podido obtener la sección central para mostrar barras de desplazamiento (usando overflow: auto) cuando el contenido crece demasiado.)

Fuente

2010-03-29 Jared I

No puede hacer esto de forma cruzada sin usar tablas. Las tablas pueden hacer esto trivialmente. Pasarás mucho tiempo golpeándote la cabeza contra una pared. Las tablas son una herramienta y si CSS "puro" no puede hacer lo que usted desea (que no puede en este caso) necesita superarlo y usar herramientas que sí lo pueden hacer. – cletus

@cletus: En cuanto a "Las tablas pueden hacer esto trivialmente" ... ¿también puede permitir que las barras de desplazamiento formen parte del área central? De hecho, intenté hacer todo con tablas, y casi funcionó, a excepción de la parte de desplazamiento (solo Chrome parecía respetar 'overflow: auto' cuando se usa dentro de' td') –

Hacer esto es relativamente simple con CSS, cruzar navegador, y no necesita tablas. Trataré de poner un enlace junto con una muestra del marcado, pero me voy a salir de la ciudad el lunes por la noche durante una semana, así que no sé si podré hacer eso para entonces. – Rob

¿qué tal THIS?
funciona con konqueror (KHTML), chrome (webkit) y firefox (gecko). como cualquier cosa reciente, probablemente barf bajo IE6.

<html><body style="margin: 0; padding: 0;"> 
    <div style="position: absolute; background: #faa; 
       height: 100px; top: 0px; width: 100%;">header</div> 
    <div style="position: absolute; background: #afa; 
       top: 100px; bottom: 100px; left: 0; width: 100px;">left</div> 
    <div style="position: absolute; background: #afa; 
       top: 100px; bottom: 100px; right: 0; width: 100px;">right</div> 
    <div style="position: absolute; background: #faa; 
       height: 100px; bottom: 0px; width: 100%;">footer</div> 
    <div style="position: absolute; background: #aaf; 
       bottom:100px; left: 100px;top: 100px;right: 100px; overflow: auto;"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt tempor 
velit quis volutpat. Nulla pharetra pulvinar arcu sed lacinia. Nulla ultrices aliquet sem, 
vitae commodo elit condimentum ut. Nulla consectetur facilisis nibh, et tempus purus 
pellentesque nec. Ut eu nibh ut arcu mattis luctus. Cras at interdum quam. Pellentesque 
imperdiet mi vitae felis sollicitudin iaculis. Maecenas accumsan tortor neque, at posuere 
felis. Quisque ultricies mi quis dolor pellentesque elementum. Maecenas quis nunc tortor. 
Cras eu velit faucibus nulla volutpat mollis. Aliquam fermentum lobortis diam ut pharetra. 
Duis mattis posuere fringilla. Morbi consectetur mauris vel libero pellentesque varius. 
Aenean leo enim, placerat a feugiat nec, ultrices et nulla. Etiam tincidunt urna id justo 
molestie faucibus. Cras neque enim, semper et sodales eu, volutpat nec urna. Vestibulum 
interdum arcu et ante egestas ut lacinia dui semper. Cras ligula lacus, aliquet nec dapibus 
ac, commodo vitae libero. In gravida venenatis sapien a convallis.</p> 


    <p>Nulla ac risus eu velit pulvinar pretium. Etiam porttitor viverra sollicitudin. 
Donec lectus mi, posuere quis luctus facilisis, lacinia non ante. Sed sed mi neque. Etiam 
neque risus, bibendum et tincidunt vel, pharetra nec risus. In hac habitasse platea 
dictumst. Nam sollicitudin condimentum lorem, quis dignissim turpis sagittis nec. 
Pellentesque diam nunc, rhoncus quis lobortis id, lacinia quis lorem. Maecenas tempor metus 
nec velit facilisis in rhoncus lectus varius. Integer mollis, odio ut pharetra varius, elit 
nulla pellentesque neque, a egestas est justo dapibus neque. Vivamus a mauris massa, sit 
amet commodo orci. Aliquam nec iaculis sapien. Suspendisse ornare, tortor eget mattis 
tempus, nulla ligula fermentum elit, vitae euismod odio metus ac risus. Etiam iaculis 
dignissim consectetur. Nunc molestie lorem ac neque pulvinar vitae eleifend justo 
facilisis.</p> 

    <p>Duis a sem turpis, et cursus arcu. Suspendisse potenti. Sed eu risus orci, eget 
bibendum justo. Praesent dapibus porttitor mauris, ac sollicitudin eros pretium quis. 
Curabitur mi eros, aliquam et ultrices et, adipiscing ut mauris. Nunc pretium malesuada nisi 
laoreet consectetur. Phasellus mi arcu, rutrum in blandit in, consectetur non risus. 
Vestibulum enim lacus, aliquam eu ultrices a, tempor ut turpis. Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Curabitur rhoncus faucibus sapien, quis vulputate eros tempus 
consequat. Vivamus id metus massa. Vivamus aliquet enim quis sem viverra eu molestie elit 
cursus.</p> 

    <p>Mauris at lorem massa. Aliquam risus ligula, vestibulum et placerat condimentum, 
pellentesque sit amet justo. Cras tempor sollicitudin ultrices. Aliquam sed elit sapien. 
Praesent consectetur molestie vehicula. Pellentesque quis lectus et nunc accumsan feugiat. 
Ut rhoncus aliquet libero sed rhoncus. Fusce egestas nunc eu elit vestibulum placerat. Class 
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
Phasellus vitae nisi ante, id fermentum justo.</p> 

    <p>Donec iaculis magna nec elit fringilla imperdiet. Proin mauris sem, pellentesque sed 
ultrices ac, luctus ac elit. Donec blandit, orci ac volutpat luctus, turpis sem malesuada 
tellus, eget porta magna nisi vitae quam. In vitae scelerisque urna. Proin ante odio, 
ultrices lobortis scelerisque at, dictum non justo. Pellentesque tincidunt congue leo 
malesuada ullamcorper. Quisque dapibus, massa dignissim gravida blandit, augue felis 
vehicula urna, et ullamcorper turpis orci sit amet nibh. Ut vitae consequat nibh. 
Pellentesque turpis justo, ultrices ac porta in, pretium quis quam. Donec purus nisi, 
dignissim vitae hendrerit vel, hendrerit ac sapien. Fusce facilisis purus a libero elementum 
ultrices. Nunc in libero congue ipsum tempor suscipit. Pellentesque pharetra pretium 
volutpat. Nam sapien arcu, viverra vitae euismod sit amet, mollis nec arcu. Phasellus at 
elit metus, sit amet tempus turpis. Phasellus mattis justo ut est varius facilisis ut et 
leo. Phasellus congue cursus est eget luctus. In eleifend diam at enim ultricies a lacinia 
mauris molestie. Nunc porttitor bibendum vulputate. Pellentesque quis risus vel mi 
pellentesque imperdiet vitae ac nunc.</p> 

    </div> 
    </body></html>

Fuente

2010-03-29 05:16:41

¡Oh, bueno! La idea de un posicionamiento absoluto para establecer el tamaño de un elemento atravesado por la mente mientras escribía el mío, pero no pensé en ello como una solución al problema en cuestión, ¡muy agradable! –

¡Perfecto! Sabía que tenía que haber una forma razonable de hacer esto ... –

Creo que esto es un poco extraño intentarlo. Sin embargo, probé, y es posible que haya llegado tan lejos como usted consiguió, pero tal vez utilicé un método diferente que podría ser útil. Estoy muy interesado en ver si Rob tiene una mejor manera.Mi método funciona, con un problema: el contenido es desplazable, pero no puede ver las barras de desplazamiento. No puedo pensar en una forma de arreglar esto. De todos modos, esto es lo que se me ocurrió: http://www.happyspork.com/layout_test.html

Fuente

2010-03-29 01:14:02

Si alguien está interesado he desarrollado un diseño que utiliza css para emular el comportamiento dinámico table [usando div s]. Funciona en Chrome, Firefox e IE> 7.

DEMO, tienen un ir a cambiar el tamaño de la ventana

Tal como está los cinco componentes crecen como sus respectivos contenidos hacen, sin embargo, si realmente desea que sus lados izquierdo y derecho fijos solo se aplica una regla width-.east y .west.

Tenga fiddle con él.

Código:

<div class="view" style="height:100%; width:100%"> 
    <div class="north"> 
     n 
    </div> 

    <div class="middle"> 
     <div class="west"> 
      w 
     </div> 

     <div class="centre"> 
      c 
     </div> 

     <div class="east"> 
      e 
     </div> 
    </div> 

    <div class="south"> 
     s 
    </div> 
</div>

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

.view, 
.view > .middle { 
    display : table; 
} 

.view > .north, 
.view > .south { 
    height : 1px; 
    display : table-row; 
} 
.view > .north { vertical-align : top; } 
.view > .south { vertical-align : bottom; } 

.view > .middle > div { 
    display : table-cell; 
} 
.view > .west, 
.view > .east { 
    width : 1px; 
} 

/*div { border : 1px solid black; }*/

marcado sencilla y sin JS, y el diseño dinámico. Descomente la línea css border para ver qué está pasando.
En la parte inferior de su pregunta veo que intentó usar tablas pero con problemas. Poner un max-height en centre o middle puede ser lo que desee (para lo de la barra de desplazamiento). Tal vez esto pueda ayudarle.

Fuente

2014-01-21 06:40:33 Hashbrown

Diseño de CSS que llena el espacio disponible

Respuesta

Cuestiones relacionadas