Question

可能是一个简单的问题，但目前正在尝试使用带有菜单的横幅/标题创建一个个人网站，该网站工作正常，还有一个页脚栏。两者都使用div＆＃39; main＆＃39; div介于主要内容之间。出于某种原因，页脚栏显示在菜单/标题栏的顶部，当我试图将其放在主要部分下方时，它会覆盖它，并且它会保留在页面底部。

＆＃13;

@font-face {
  font-family: "cicle-gordita";
  src: url("fonts/Cicle_Gordita.ttf") format("truetype");
  src: url("fonts/Cicle_Gordita.eot") format("opentype");
}
body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
  background-color: #FFFFFF;
}
#banner {
  height: 50px;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  position: fixed;
  background-color: #000000;
  /*background-image: url("images/menuHor.png");*/
}
.menuBit {
  height: 40px;
  width: 100px;
  margin: 0px;
  padding: 0px;
  float: left;
  margin-left: 10px;
}
.menuContent:hover {
  text-decoration: underline;
  cursor: pointer;
}
.menuContent {
  font-family: "cicle-gordita";
  font-size: 30px;
  text-align: center;
  padding: 0px;
  margin: 0px;
  margin-top: 10px;
  color: #ffffff;
}
.main {
  position: fixed;
  margin: 0px;
  margin-top: 50px;
  padding: 0px;
  width: 100%;
  height: 90%;
  background: #ff0000;
  overflow: hidden;
}
#footer {
  width: 100%;
  background: #000000;
  height: 50px;
  position: fixed;
  clear: both;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Personal - Home</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="theme.css">
</head>

<body>
  <div id="banner">
    <div class="menu">
      <div class="menuBit">
        <h2 class="menuContent">HOME</h2>
      </div>
      <div class="menuBit">
        <h2 class="menuContent">BLOG</h2>
      </div>
      <div class="menuBit">
        <h2 class="menuContent">WORK</h2>
      </div>
    </div>
  </div>

  <div class='main'>
    <!-- Content Here -->
  </div>
  <div id="footer"></div>
</body>

</html>

＆＃13;

如头部所示，我有一个jscript / jquery文件，但所有包含的内容都是一小段代码，可以在页面加载时淡化主要文件，它不会改变任何内容。

Answer 1

将bottom: 0;添加到#footer

默认为top: 0;

Answer 2

#footer {
    position: fixed;        
}

在fixed上设置的位置属性将使元素保持在固定位置，无论您如何滚动，它的“固定”位置由top or bottom,left or right属性确定。

如果您希望将其“正常”定位，则删除position: fixed属性并进行设置。

如果您确实想要修复它，那么您可以按照Pat的回答。

HTML页脚/ Div定位

2 个答案: