Geek Answers Handbook

How to build this layout using CSS?

I'm not new to CSS, but this is a problem for me, and I cannot solve it. I need to build a layout as shown below:

Layout http://img121.imageshack.us/img121/2153/layoutsample.jpg

Divs, which are below and above, have fixed heights. The one in the center should be at a height PAGE HEIGH - DIV 1 HEIGHT - DIV 3 HEIGHT or less in some cases.

He also had to set this size, because I predict that sometimes it will be larger than him, and then he will need a scroll bar.

I will accept the case where DIV2 will be smaller, but not too large to fit the page size with DIV1 and DIV3.

Any solutions would be good, not only using CSS, but if you have an idea, you can drop some Javascript too ... I would be grateful for any solution .. not even completely correct :)

+5
source share
4 answers

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>
+8
source

This will help you center divs vertically and horizontally.

http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

+4
source

jQuery DIV2 :

var $div1 = $('#DIV1'),
    $div2 = $('#DIV2'),
    $div3 = $('#DIV3'),
    $window = $(window);

$window.resize(function ()
{
    $div2.height($window.height() - ($div1.height() + $div3.height()));
});

- , .

+2

, , . .

<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>
0
source

More articles:


All Articles