拜托，我无法让这段代码工作。我正在尝试制作页眉和页脚，两者都是相对定位的，但效果不是很好。它仅在我将所有位置值更改为 Absolute 时才起作用，我读过这是一种不好的做法，更不用说可能出现的外观错误了。这是我的 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>
当使用上述代码运行浏览器(最新的谷歌浏览器)时，它显示如下:http://jsfiddle.net/c8RDC/3/
如果这是一个愚蠢的问题，我真的很抱歉，但我真的无法让它发挥作用。
最佳答案
关于html - 为什么在尝试假设 divs 的高度时相对定位不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24709368/