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 :)
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 :)
Share Improve this question edited Aug 4, 2019 at 3:10 Glorfindel 22.7k13 gold badges89 silver badges118 bronze badges asked Jul 27, 2010 at 14:47 Łukasz W.Łukasz W. 9,7555 gold badges39 silver badges65 bronze badges4 Answers
Reset to default 8I 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>
This will help you center divs vertically and horizontally
http://demo.tutorialzine./2010/03/centering-div-vertically-and-horizontally/demo.html
Using jQuery to set DIV2's height on window resize:
var $div1 = $('#DIV1'),
$div2 = $('#DIV2'),
$div3 = $('#DIV3'),
$window = $(window);
$window.resize(function ()
{
$div2.height($window.height() - ($div1.height() + $div3.height()));
});
is another option I've used.
I'm not sure if i understand exactly what you ask. But what about this.
<html>
<head>
<style>
body {
margin : 0
}
#top {
position: absolute;
top: 0;
left: 0;
height: 100px;
border: solid 1px black
}
#middle
{
position: absolute;
top: 100px;
bottom: 100px;
left: 0;
width: 100%;
overflow: auto;
border: solid 1px green;
}
#bottom {
position: absolute;
bottom: 0;
left: 0;
height: 100px;
width: 100%;
border: solid 1px blue;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</body>
</html>