Geek Answers Handbook

CSS layout that fills the free space

I am trying to make a seemingly simple layout of a web page, but I am hitting a wall.

I would like to do everything cleanly with CSS ( without tables to guess things and without javascript to dynamically resize things)

I would like to:

  • Fixed Height Header
  • Fixed Header Footer
  • Fixed Side Left Sidebar
  • Fixed side right side panel
  • The entire layout always fills the entire viewport (i.e. if the user resizes the window, the layout grows to a new size)

Put another way:

 | <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 |  one hundred%
 |  |  |  |  of
 |  |  |  |  viewport
 |  |  |  |  
 | -------- + ---------------------------------------- --- + --------- |   
 |  Footer with a fixed height |  v
 + ------------------------------------------------- ------------- + ---

The parts that bring me the most trouble

  • The presence of side panels and a center with a height equal to the height of the viewport, minus the height of the header and footer
  • The presence of the center has a width equal to the width of the viewport minus the width of the two side panels

I have no problem getting users to have a modern browser.

I know that similar questions were asked before, for example

  • Make the remaining fill space ( http://stackoverflow.com/questions/1717564 )
  • Three-line CSS layout with three lines with a middle line that fills the remaining space ( http://stackoverflow.com/questions/1703455 )
  • Create 2 divs, one takes up the remaining space ( http://stackoverflow.com/questions/1717564 )

... and the conclusion seems to be that there is no good solution. These answers are somewhat old, so I hope someone knows the trick now.

Yes, I know that it seems trivial to achieve with <table> , and after I hit my head against the wall, I really tried to reach the layout using the table. Unfortunately, with this approach, I could not get the center section to show scrollbars (using overflow: auto ) when the content gets too big.)

+7
html css
source share
3 answers

how about it?
It works with konqueror (KHTML), chrome (webkit) and firefox (gecko). like everything recent, it will probably depend on 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>
+8
source share

I think it is a little strange to try to do it. However, I did this, and I might have gotten to the place, but maybe I used a different method that might be useful. I am very interested to know if Rob has a better way. My method works with one problem: the content scrolls, but you cannot see the scroll bars. I can't seem to figure out how to fix this. Anyway, here is what I came up with: http://www.happyspork.com/layout_test.html

+2
source share

If anyone is interested, I developed a layout that uses css to emulate the dynamic behavior of table [using div s]. It works in Chrome, Firefox and IE> 7.

DEMO , resize the window

As all five components grow as their respective contents grow, however, if you really want your left and right sides to .east , just apply the width rule to .east and .west .

You have a fiddle .

The code:

 <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; }*/

Simple markup, no JS, and dynamic layout. Uncomment the border css line to see what happens.
At the bottom of your question, I see that you tried to use tables, but with problems. Placing max-height on centre or middle may be what you want (for scrolling). Maybe this can help you.

0
source share

More articles:


All Articles