Menu
I'm not new at CSS, but this is problem for me and I can't solve it. I need to build layout as below:
Divs that are at the bottom and at the top have fixed heights. The one in the center have to be exacly in the height of PAGE HEIGHT - DIV 1 HEIGHT - DIV 3 HEIGHT or in some cases smaller.
Also it have to had this size setted because I predict that sometimes it's content will be bigger than it and then it will need a scrollbar inside.
I will accept case when DIV2 will be smaller, but never too big to fit to page size with DIV1 and DIV3.
Any solutions will be good, not only using CSS, but if you have an idea you can throw some Javascript too... I will be grateful for any solution.. even not fully correct :)
637
CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward.
The methods that can change how elements are laid out in CSS are: The display property — Standard values such as block , inline or inline-block can change how elements behave in normal flow, for example, by making a block-level element behave like an inline-level element (see Types of CSS boxes for more information).
CSS layout types: Fixed, Elastic, and Fluid.
I believe you want something like this
<div id="header" style="position:absolute; top:0px; left:0px; height:200px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; overflow:hidden;">
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
