Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
I have been trying all sorts of methods and Googling for the last hour. Nothing I found works or did what I want.
Can anyone tell me how can it be done? -
-
CommentAuthorkari.patila
- CommentTimeNov 21st 2007
So, is the problem that the bottom div doesn't stay at the bottom if the middle div isn't tall enough?
-
-
- CommentAuthorWhereIsThatDeafGuy
- CommentTimeNov 21st 2007
"aligned to bottom"
*shuddering*
I think I am having a table-layout flashback. ;)
Are you trying to have the bottom div (or footer) stay in a fixed position? -
- CommentAuthorfransgaard
- CommentTimeNov 21st 2007
I haven't tried this but what about
header{height:10%;)
content(height:80%;overflow:auto;}
footer{height:10%;}
Maybe this can help as well
http://www.csszengarden.com/?cssfile=/202/202.css&page=0 -
- CommentAuthorJugularBean
- CommentTimeNov 22nd 2007
Is this for a footer?
In any case Google footerstick and you'll find very simple and working CSS code. -
Hi there,
If i get it right you need a page layout made out of css (divs) which always fits, streches 100% to the browser size.
I don't think you can make it by CSS only or fix me!
I have gave it a try, and with some fancy javascript, which i wrote, i found it possible to make this work.
I've tested it in Firefox 2, Explorer 6 and Opera 9.24. Works fine.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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: #fcf1cb;
}
</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<br/><br/></div>
</body>
</html>
Is this what you mean? -
- CommentAuthorroundhousemedia
- CommentTimeDec 6th 2007
I need something similar. I have a simple three row design. The top row height (header) needs to be fluid. The middle row height needs to be a fixed height and the bottom row height (footer) needs to be fluid as well as stuck to the bottom of the page. This was easy using tables, however, I would prefer the design to be done with CSS.
Here is an example:
Example
Example using tables
1 to 7 of 7