ansaurus

Question

Page layout with DIVs

Answer 1

A:

Would there be any problem just setting the background colour of the body to blue and then letting the content div have a variable height? It would achieve exactly the same effect.

Then you won't even have to have the container div. No point having unnecessary elements.

sixfoottallrabbit 2009-08-14 09:14:56

Can't do this. In the content div I can have an iframe, which should be stretched vertically, exactly to the bottom of the container and not more.

Anvaka 2009-08-14 09:20:50

Answer 2

A:

You can change the style for the second div to this:

#Content {
  position: absolute;
  top: 20px;
  bottom: 0px;
  width: 100%;
}

That should keep everythign within the browser frame and not add the 20px.

mishac 2009-08-14 09:37:32

Answer 3

A:

Hi,

I have a fluid height code.Hope this helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>DIV layout test</title>

<style type="text/css">
body{
margin: 0;
font-family: tahoma;
font-size: 12px;
color: #645728;
}

#header{
display: block;
width: 100%;
background: #fcf1cb;
}

#middle{
display: block;
width: 100%;
border-top:none;
background: #bce5e3;
}

#footer{
display: block;
width: 100%;
border-top: none;
background: #bce5e3;
}
</style>

<script type="text/javascript">
function getWindowInnerH(){
var innerH = null;
if (typeof(window.innerHeight) == "number"){//MOZILLA, OPERA
innerH = window.innerHeight;
}else if (typeof(document.documentElement.clientHeight) == "number"){//IE 6+
innerH = document.documentElement.clientHeight;
}

return innerH;
}

function arrange(){
var headerE = document.getElementById("header");
var middleE = document.getElementById("middle");
var footerE = document.getElementById("footer");

if (!headerE || !middleE || !footerE){
return;
}

//get window's inner height
var innerH = getWindowInnerH();

//get header's and footer's height
var headerH = headerE.offsetHeight;
var footerH = footerE.offsetHeight;
//calc middle's heigth
var middleH = Math.round(innerH - (headerH + footerH));

//set header's and footer's height
headerE.style.height = headerH + "px";
footerE.style.height = footerH + "px";

//set middle's height
middleE.style.height = middleH + "px";

}

window.onresize = arrange;
</script>

</head>
<body onload="arrange()">
<div id="header">header content<br/><br/><br/><br/><br/></div>
<div id="middle">middle content</div>
<div id="footer">footer content</div>
</body>
</html>

Note: Don't remove the footer div. If you do this technique wont works..

Logesh Paul 2009-08-14 10:11:19

Answer 4

A:

Setting width: 100% , as you know, will be like setting width: <width of the window>.

Instead you can set the Content's edges to be at 0px from the right, left and bottom of the screen.

The CSS of your page will be like this:

body {
    margin: 0px;
    top: 0px;
}
#container {
    color: white;
}
#Header { 
    background-color: grey;
    padding: 6px;
}
#Content {
    position: absolute;
    top: 30px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: 0px;
    padding-top: 6px;
    padding-left: 6px;
    background-color: blue;
}

This way the page has the same look as the image you provided.

Carmine Paolino 2009-08-14 12:02:45

Thank you! This is exactly what I needed!

Anvaka 2009-08-19 18:39:17

Heh, unfortunately this solution doesn't work in the "browser". (IE 6 of course)

Anvaka 2009-09-03 08:30:10

Answer 5

A:

The easiest way would be to omit the height: property of your content-div and allow it to expand/contract to suit the content. For this to achieve the look of the image you provided, you would need the body of the page to have the same background-property of the content-div. The idea is that where the background of Content finishes the background of body should continue.

body,
Content {background-color: #00f; }

This gets slightly trickier if you use background-images, requiring that both the body and Content are position: absolute, from memory.

David Thomas 2009-08-14 12:41:59

ansaurus

tags:

views:

answers:

Page layout with DIVs

related questions