HTML 页脚/Div 定位答案

【问题标题】：HTML footer/Div positioningHTML 页脚/Div 定位
【发布时间】：2017-03-06 15:43:34
【问题描述】：

可能是一个简单的问题，但目前正在尝试创建一个个人网站，其中包含带有菜单的横幅/标题，效果很好，还有一个页脚栏。两者都使用 div 和“main” div 之间的主要内容。出于某种原因，页脚栏出现在菜单/标题栏的顶部，当我试图将其置于主要部分下方时将其覆盖，并使其停留在页面底部。

@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;
}

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

如头部所示，我有一个 jscript/jquery 文件，但其中包含的只是一小段代码，用于在页面加载时淡入 main，它不会改变任何内容。

【问题讨论】：

我不知道这是否是问题，但是您将.main 的高度设置为90%，而其他的都是固定的，我认为高度的总和应该是100%
我建议不要在你的正文和页脚上都使用position: fixed;。在深入研究之前，请考虑重新考虑基础！
这与问题无关，但考虑使用 html5 的语义元素作为页眉、页脚、主目录
Make div stay at bottom of page's content all the time even when there are scrollbars的可能重复
@MikeMcCaughan 我不同意 :) OP 不希望 div 被修复

标签： html css positioning footer

【解决方案1】：

将bottom: 0; 添加到#footer

默认为top: 0;

【讨论】：

【解决方案2】：

#footer {
    position: fixed;        
}

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

如果您希望它“正常”定位，请删除position: fixed 属性，然后您就可以设置了。

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

【讨论】：