Question

我的HTML页面具有标题，导航栏，body内容元素和footer元素，但是，当footer元素应位于bodycontent元素下方且位于页面底部时，footer元素与div元素bodycontent重叠。请提出任何位置调整建议以解决此问题。

.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>

Answer 1

您需要添加如下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用于主菜单设计。

解决HTML中的重叠元素

1 个答案: