gpt4 book ai didi

html - 不能将页脚放在底部中心(页面包含 iframe)

转载 作者:太空宇宙 更新时间:2023-11-03 18:37:52 24 4
gpt4 key购买 nike

我想将页脚放在页面底部,但它总是向左侧移动。左边的导航 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;
}

最佳答案

这是你的问题(已修复)

Check this fiddle

#footer{
position:absolute;
bottom:0;
left:0;
background-color:#000;
height:50px;
width:100%;

}

关于html - 不能将页脚放在底部中心(页面包含 iframe),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18286067/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com