我想将页脚放在页面底部，但它总是向左侧移动。左边的导航 div 是绝对的，而 iframe 是 float 的。请帮助我如何移动页面底部中心的页脚。
这是我的代码
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.png" alt="Orion Logo">
</div>
<div id="menu">
<ul>
<li><a href="about.html" target="content">About</a></li>
<li><a href="support.html" target="content">Support</a></li>
<li>Student Operation
<ul>
<li>Logging In</li>
<li>Creating Enquiry</li>
<li>Making Admission</li>
<li>Issuing Invoice</li>
<li>Issuing Kit</li>
</ul>
</li>
</ul>
</div>
<div id="frame">
<iframe id="content" name="content" src="about.html"></iframe>
</div>
<div id="footer">
<p>© 2013 Footer</p>
</div>
</body>
</html>
CSS
html {
height: 80%;
}
body {
margin: 0;
padding: 0;
height: 100%;
font-family: sans-serif;
font-size: 80%;
text-align: justify;
}
#header {
background-color: #f8651c;
padding-bottom: 3%;
margin: 0;
border: 0;
}
#logo {
margin: 10px 0 0 10px;
padding: 0;
border: 0;
}
#menu {
position: absolute;
margin: 0;
padding: 0;
border: 0;
width: 20%;
}
#frame {
float: right;
height: 100%;
width: 80%;
border-left: 2px solid #a2a2a2;
padding: 0;
margin: 0;
}
#content {
height: 100%;
width: 100%;
border: 0;
padding: 0;
margin: 0;
}
#footer {
position: absolute;
bottom: 0;
text-align: center;
}
最佳答案
这是你的问题(已修复)
#footer{
position:absolute;
bottom:0;
left:0;
background-color:#000;
height:50px;
width:100%;
}
关于html - 不能将页脚放在底部中心(页面包含 iframe)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18286067/