All geek questions in one place

CSS layout with header, footer and multiple content columns with a minimum height of 100%

Here is what I want to achieve:

Expected result

  • The footer should remain at the bottom of the screen, even if the content does not fill the vertical viewport.
  • Content columns have a border that should always be 100% of the content height. Since the number and width of the columns will vary from page to page, background images and fake column borders cannot be used.
  • When all content is visible, there should be no scroll bars (example 1).
  • The solution should be completely HTML / CSS, without JS.
  • Minimum browser support should be IE9 + and the latest versions for desktop computers Firefox, Chrome, Safari, Opera; no fad mode.
  • The width of the header / footer / content is always fixed (so there is no need to place the header and footer inside the content area). The height of the header and footer is also fixed.

I tried methods from columns of equal height of fluid width and this example with a footer attached , but could not satisfy all the requirements at the same time. Any advice is appreciated.

Edit: so far the farthest Ive got a table simulation that works correctly in webkit browsers, but not in IE9 and Opera. Look at the fiddle here .

HTML:

<div class="table outer"> <div class="row header"> <div class="cell">header</div> </div> <div class="row content"> <div class="cell"> <div class="table inner"> <div class="row"> <div class="cell">content 1</div> <div class="cell">content 2</div> <div class="cell">content 3</div> </div> </div> </div> </div> <div class="row footer"> <div class="cell">footer</div> </div> </div>

CSS:

 html, body { height: 100%; } .table { display: table; min-height: 100%; height: 100%; } .table.outer { width: 500px; margin: 0 auto; } .row { display: table-row; } .cell { display: table-cell; } .header, .footer { height: 25px; background-color: #999; } .content { background-color: #eee; } .table.inner { width: 100%; min-height: 100%; height: 100%; } .table.inner .cell { width: 33%; border-right: 1px dashed #c00; }
+4
source share
3 answers

Although this is not a semantically desired solution, the only way to find all the stated requirements is to go back to the 90s and use the tables for the layout.

See the fiddle here .

HTML:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <table class="outer"> <tr> <td class="header" colspan="3">header</td> </tr> <tr class="content"> <td>content1</td> <td>content2</td> <td>content3</td> </tr> <tr> <td class="footer" colspan="3">footer</td> </tr> </table> </body> </html>

CSS

 html, body { height: 100%; margin: 0; } .outer { min-height: 100%; height: 100%; width: 500px; margin: 0 auto; } .header, .footer { height: 25px; background-color: #999; } .content td { width: 33%; background-color: #eee; border-right: 1px dashed #c00; vertical-align: top; }
+4
source

Try the following:

 #footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; } /* IE 6 */ * html #footer { position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); }
0
source

In case anyone is interested, I figured out a solution using jQuery (instead of tables).

http://benpearson.com.au/web-development/3-column-fluid-layout-with-header-sticky-footer-and-100-percent-height-columns/

0
source

Source: https://habr.com/ru/post/1443598/

More articles:


All Articles