如何解决CSS:页面底部的页脚与内容重叠且宽度较大
我希望页脚停留在我的网页底部。我做到了,但是如果主要内容很长,用户将无法滚动页面;结果(我想)是页脚与内容重叠。 另一个问题是页脚的宽度大于网站的“页眉”。
这是我的页脚CSS:
#footer {
position: absolute;
bottom: 0;
width: 100%;
font-size: 0.9em;
padding: 2em;
background-color: orange;
border: 0.2em #4040ff;
margin-bottom: 1em;
border-style: solid;}
我还上传了屏幕图像,以便向您显示图形问题。
谢谢。
解决方法
对我来说,总是这样:
html { height: 100%; }
body {
min-height:100%;
position:relative;
padding-bottom:[footer-height]
}
.footer {
position: absolute;
left: 0 ; right: 0; bottom: 0;
height:[footer-height]
}
,
我写了一个代码片段,可以解决您的问题
html,body{
height:100%;
margin:0;
}
header {
height: 30px;
background-color: #000;
color: #fff;
padding: 20px;
text-align:center;
}
footer{
height: 30px;
background-color: #000;
color: #fff;
padding: 20px;
text-align:center;
margin-top: auto;
}
body{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction:column;
}
header p,footer p{
margin: 5px 0px;
}
.container{
text-align:center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header>
<p>This is header</p>
</header>
<div class="container">
<p>This is body content</p>
</div>
<footer>
<p>This is footer</p>
</footer>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。