Content 100% stretch
Im trying to do layout that has header, content and footer. Footer must be bottom of the page(done). But my problem is how can I get content 100% strech between header and footer. When my content is empty, then I can't see that, but when I'm writing some word to开发者_运维技巧 html in to content div, like "hello", then the content is only so long than the content in content. I guess you can understand what I mean. Can somebody explain what is wrong in my css code.
Red is header, green is footer, cyan is content and blue is container. Problem is that Content does not cover the container area.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Praktika1</title>
<link rel="stylesheet" href="style1.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
@CHARSET "UTF-8";
*{padding:0; margin:0;}
html,body{
height:100%;
}
#container{
width: 1024px;
position:relative;
background-color:#cce;
margin: 0 auto;
min-height:100%;
}
#header{
width: 1024px;
height:100px;
background-color: #CCC;
}
#content{
height:100%;
width:1024px;
background-color:yellow;
}
#footer{
width: 1024px;
height: 100px;
position:absolute;
bottom:0;
background-color: #ced;
}
You're in luck. I spent a good amount of time yesterday figuring out a question similar to this.
http://andrew.x10.mx/rene/
html -
<div id="container">
<div id="header">
<div id="header-content">
Hai der. I'm a header.
</div>
</div>
<div id="content">
<h1>Content here</h1>
<div id="footer">
<div id="footer-content">
I'm a footer lol
</div>
</div>
</div>
</div>
css -
html,body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background: #0f0;
top: 0;
left: 0;
position: absolute;
width: 100%;
}
#header-content {
padding: 10px;
}
#container {
background: #ff0;
height:auto !important;
height:100%;
position:relative;
width: 1024px;
text-align: left;
margin: 0 auto;
min-height:100%;
}
#content { padding: 20px 10px; }
#footer {
background: #f00;
bottom: 0;
left: 0;
position: absolute;
width: 100%;
text-align: center;
}
#footer-content { padding: 10px; }
Hard to tell without the HTML, but I would try to add a min-height of %100 to #content
One solution would be this:
#content{
background-color:yellow;
position:absolute;
top:100px;
bottom:100px;
width:100%;
}
You could use absolute positioning on all three parts of the page (header, content, footer):
Live demo: http://jsfiddle.net/bBEJ6/
Perhaps a margin-bottom: 0 px could work?
Your question is worded very poorly, but from what I can see you want your content to fill up 100% of your page, yet you have specified a specific width on your #content section by using the width:1024px property.
Try width:100% and see if this solves your problem.
加载中,请稍侯......
精彩评论