All geek questions in one place

Vertical fluid layout

I looked through many forums and questions, but could not find anything about the vertical (not horizontal) fluid.

I have the markup as follows:

<div class="wrapper"> <div class="header"></div> <div id="content"></div> <div class="footer"></div> </div>

My CSS:

 html,body {margin: 0; padding: 0; height: 100%;} .wrapper {width: 900px; margin: 0 auto; height:auto !important; height:100%; min-height:100%; position: relative;} #content {padding-bottom: 60px; /* For the footer padding */ } .footer { position: absolute; bottom: 15px; height: 45px;}

In this case, I have a layout with a fixed header and content height. The footer rests on the bottom.

All this is great, but I want to make a liquid vertical layout, so that the footer always sticks to the bottom (the same as it is now), but the header and contents have a liquid height: 30 and 70%, respectively.

How can i achieve this?

+4
source share
5 answers

In such cases, I usually say - to hell with CSS headaches, let it just use the old old table instead !

HTML:

 <table style="height: 100%"> <tr> <td id="header"></td> </tr> <tr> <td id="contents"></td> </tr> <tr> <td id="footer"></td> </tr> </table>

CSS

 body, html { height: 100%; } #header { background-color: red; height: 30% } #contents { background-color: lime; height: 70% } #footer { background-color: blue; height: 45px; }

It may not be "stylish", but it does its job and will be an order of magnitude easier than the necessary CSS spiderweb. In addition, if the content of something becomes too large, it will (somehow, taking into account the browser) resize so that everything can be seen by adding to the scroll panel, if necessary.

0
source

Markup:

 <body> <div id="container"> <div id="header"> </div> <div id="content"> <div id="content-text"> </div> </div> <div id="footer"> </div> </div> </body> </html>

CSS

 html { height: 100%; } body { padding: 0; margin: 0; height: 100%; } #container { position:relative; z-index:1; width:100%; height:100%; margin-left: auto; margin-right:auto; overflow:hidden; } #header, #footer { position:absolute; left:0; z-index:2; width:100%; overflow:hidden; } #header { top:0; height:30%; } #footer { bottom:0; height:1.6em; } #content { position:absolute; bottom:0; top:0; right:0; left:0; z-index:10; width: 100%; height:auto; margin-top:30%; margin-bottom:1.6em; overflow:hidden; } #content-text { position:relative; width:100%; height:100%; margin-left: auto; margin-right:auto; overflow:auto; }

I also recommend CSS reset before that.

EDIT Sorry, at first I added the patch size for the header, I fixed it, although it seems to be a bit wrong. I'm still looking for a better way.

+3
source

For footer you can try this

 .footer { position: fixed; bottom: 0; height: 45px; }
0
source

Since I had the same problem, you probably need a so-called “sticky footer”.

Check out the example http://ryanfait.com/sticky-footer/ , it works in all browsers. There's also a good article outlining how to achieve it here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

0
source

Demo Page - Fixed Fixed Liquid

I did a quick demonstration of the layout, which is very common:

HTML

 <body> <header>Header</header> <section>Content</section> <footer>Footer</footer> </body>

CSS

 html, body{ height:100%; } /* you can use "border-spacing" on the body as well */ body{ display:table; width:100%; padding:0; margin:0; } body > *{ display:table-row; } header{ height:100px; } section{ height:100%; } footer{ height:50px; }


Please note that this will only work in modern browsers.

0
source

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

More articles:


All Articles