请，我无法使此代码正常工作。我正在尝试制作一个相对位置的页眉和页脚，但是效果不是很好。仅当我将所有位置值都更改为“绝对”时，它才有效，这是一种不好的做法，更不用说可能的外观错误了。这是我的CSS代码：
body{
margin:0px;
padding:0px;
}
#div_header {
background-color:#0000ff;
width:100%;
height:20%;
padding:0px;
margin:0% 0% 7% 0%;
position:absolute;
}
#div_footer{
background-color:#ffff00;
width:100%;
height:100%;
position:relative;
top:30%;
margin:0px;
padding:0px;
bottom:0px;
}
#col1{
position:absolute;
bottom:0px;
}
#col2{
position:absolute;
bottom:0px;
left:12%;
}
#col3{
position:absolute;
bottom:0px;
left:24%;
}
#col4{
position:absolute;
bottom:0px;
left:36%;
}
#div_content{
background-color:green;
width:65%;
height:100%;
position:relative;
top:10%;
left:17%;
}
#div_leftBar{
background-color:orange;
width:12%;
height:60%;
position:fixed;
top:20%;
}
#div_rightBar{
background-color:red;
width:14%;
height:60%;
position:fixed;
top:10%;
right:0px;
}
和HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Website</title>
<link rel="stylesheet" href="index.css" type="text/css">
</style>
</head>
<body>
<div id="div_header">
aaa
</div>
<div id="div_leftBar">
</div>
<div id="div_rightBar">
</div>
<div id="div_content">
Lorem ipsum dolor sit amet...
</div>
<div id="div_footer">
<ul id="col1">
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
</ul>
<ul id="col2">
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
</ul>
<ul id="col3">
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
</ul>
<ul id="col4">
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
<a href="">
<li>Lorem Ipsum Dolor</li>
</a>
</ul>
</div>
</body>
</html>
当使用上述代码运行浏览器（最新的Google Chrome）时，它显示如下：http://jsfiddle.net/c8RDC/3/
如果这是一个愚蠢的问题，我真的很抱歉，但是我真的无法解决它。
最佳答案
这更像您想要的吗？
http://jsfiddle.net/c8RDC/5/
容器使用：
position: relative
里面的东西都用
position: absolute;