解析HTML中的重叠元素
解析HTML中的重叠元素
提问于 2018-11-16 19:46:12
我的HTML页面有一个页眉、导航栏、主体内容元素和一个页脚元素，但是当页脚元素应该在body内容元素下面和页面底部时，页脚元素与div元素body内容重叠。请建议任何位置的改变来解决这个问题。
.header {
padding: 10px;
width: 100%;
text-align: center;
background-color: #F2F2F2;
color: #424242;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.footer {
clear: both;
position: inherit;
bottom: 0;
left: 0;
text-align: center;
width: 100%;
height: 20px;
background-color: #808080;
color:#fff;
}
.prodheading {
width: 100%;
height: 20px;
background-color: #808080;
color: #fff;
text-align: center;
vertical-align: middle;
}
ul.nav_bar{
position: absolute;
height: 50px;
top: 50%; left: 50%;
margin-top: -25px; margin-left: -200px;
padding: 0px;
list-style: none;
text-align: center;
}
.bodycontent{
position:relative;
top:45px;
bottom:30px
padding:15px;
}我的主页HTML页面-
<html>
<head>
<style><%@include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My Webpage</title>
</head>
<body>
<%@ include file="header.jsp" %>
<div class="bodycontent">
<h3>Our Mission</h3>
<p>Hello World !!!</p>
<h3></h3>
<p>Trying out webpage</p>
</div>
<%@ include file="footer.jsp" %>
</body>
</html>头html元素-
<html>
<head>
<style><%@include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<center>
<h3>Title 1</h3>
<h5>Title 2</h5>
</center>
<ul class="nav_bar">
<li class="navit"><a class="link">Home</a></li>
<li class="navit"><a class="link" >Items</a></li>
<li class="navit"><a class="link" >About Us</a></li>
<li class="navit"><a class="link" >Contact</a></li>
</ul>
</body>
</html>页脚html元素
<html>
<head>
<style><%@include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<center>All rights reserved 2018</center>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-17 06:27:55
您需要添加如下CSS代码：
.header {
display: inline-block;
padding: 10px;
width: 100%;
text-align: center;
background-color: #F2F2F2;
color: #424242;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.footer {
display: inline-block;
width: 100%;;
text-align: center;
width: 100%;
height: 20px;
background-color: #808080;
color:#fff;
}
.prodheading {
display: inline-block;
width: 100%;
height: 20px;
background-color: #808080;
color: #fff;
text-align: center;
vertical-align: middle;
}
ul.nav_bar{
position: absolute;
height: 50px;
top: 50%; left: 50%;
margin-top: -25px; margin-left: -200px;
padding: 0px;
list-style: none;
text-align: center;
}
.bodycontent{
display: inline-block;
width: 100%;
padding:15px;
}
现在，您可以根据需要在ul.nav_bar中为主菜单设计添加CSS。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53344404
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号