无法在页面底部设置页脚

Question

我目前正在一个网站上工作，我对这个不会留在页面底部的页脚感到疯狂。我已经检查了具有相同问题的其他主题，但没有解决我的问题。

当我尝试 "relative" 时，页脚位于 "topbox"（这是我的 header）下方，而当我尝试 "absolute" 时，它位于页面中间.

 <header>
 <div class="topbox">
 <ul>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#news">Services</a></li>
 <li><a href="#contact">Clients</a></li>
  <li><a href="#contact">Contact</a></li>
 <li><a href="#about">About</a></li>
 </ul>
 </div>
 </header>
<body>
<div class="wrapper">
<div class="scrollbtn"><img src="Images/Scroll.png" style="width:40%"/>     
</div>
<div class="bgbox">
<div class="box2">
<a> Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</a>
</div>
</div>
<div id="footer">© 2017 "TEXT" All Rights Reserved</div>
</div>
</body>

所以这里我们有 TOPBOX，它是 header、Wrapper、scrollbtn（表示需要滚动的鼠标图片）、bgbox（内容背景）、box2（内容）、"lorep ipsum" 是内容并且很长，使用户滚动。这是我的问题，页脚在您加载时位于页面底部，因此在您向下滚动时位于页面中间。

这是 CSS :

 body, html {
 width:100%;
 height:100%;
 background-color: #060b0f;
 padding:0%;
 background-image: url('../images/background3.jpg');
 background-size:cover;
 background-repeat: no-repeat;
 background-attachment: fixed;
 }
 /* HEADER */
 .topbox {
 margin:0%;
 position: fixed;
 top:0%;
 left: 0%;
 width:100%;
 z-index:999;
 text-align:center;
 overflow: hidden;
 padding:0%;
 font-family:Impact;
 font-size:20px;
 }
 .topbox ul {
  list-style-type: none;
  margin: 0%;
 padding: 0%;
 overflow: hidden;
 background-color: #459cfe;}

 .topbox li {
 display: inline;
 }
  .topbox li a {
 display: inline;
 color: black;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 }
 .topbox li a:hover:not(.active) {
   background-color: #397fcd;
 }
.active {
  background-color: #fff;
}
/*HEADER FIN*/
.scrollbtn {
position: absolute;
bottom : 0%;
left: 49%;
}

.hot {
color:#4080e1;
}
.box2 {
 margin-top:0px;
 margin-left:10%;
 width : 70%;
 opacity:1;
 color: black;
 overflow: hidden;
 text-align:center;
 z-index:4;

 background-color:transparent;


 }
 .box2 a{
 opacity:1;
  }
 .bgbox {
 margin-top:0px;
 margin-left:8%;
 padding: 5%;
 padding-left: 8%;
 width : 70%;
 position: absolute;
 top : 10%;
 left: 0%;
  background-color: rgba(255,255,255,0.5);     
 overflow: hidden;
 text-align:center;
 z-index:3;


 }
 .bgbox:hover {
 background-color: rgba(255,255,255,0.9);  
 }

 #footer {
 font-size:20px;
 cursor:pointer;
 color: black;
 text-align: center;
 width:100%;
 position:relative;
 left:0px;
 bottom:0px;
 background-color: #459cfe;
 }
.wrapper {
 height:100%;
 }

我已经尝试了很多不同的东西（改变 body 高度，包裹所有东西，相对的，绝对的，固定的，静态的，...）我想不出别的东西。我需要一个外在的观点。

Answer 1

首先，您的代码输出不正确，这是正确的 html 代码：

<body>
 <header>
 <div class="topbox">
 <ul>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#news">Services</a></li>
 <li><a href="#contact">Clients</a></li>
  <li><a href="#contact">Contact</a></li>
 <li><a href="#about">About</a></li>
 </ul>
 </div>
 </header>
<div class="wrapper">
<div class="scrollbtn"><img src="Images/Scroll.png" style="width:40%"/>     
</div>
<div class="bgbox">
<div class="box2">
<a> Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</a>
</div>
</div>
<div id="footer">© 2017 "TEXT" All Rights Reserved</div>
</div>
</body>

header 标签必须在 body 标签内

第二件事我用页脚位置尝试了你的代码：绝对；对我很有用

Answer 2

您想根据父元素的底部定位页脚。所以你必须给它一个 position:absolute

它会找到最近的不是 "static" 的父级来定位自己的相对位置。所以目前它将位于 "body" 的底部。如果您希望它位于“.wrapper”的底部，请将 .wrapper 的位置设置为 "relative"

编辑：好的，我看到 "bgbox" 超出 "header" 的问题。

1。删除所有 "height 100%" - 将高度设置为与视口相同（可见）

2。您的 "bgbox" 当前是绝对定位的 - 因此它不会被其他内容 "pushed down" 定位，并且随着它变大也不会压低其他内容。我不确定你在这里打算做什么。您希望 "bgbox" 成为页面常规内容的一部分吗？在这种情况下，将其设置为 position:relative。（我认为您不希望其他内容占用与 bgbox 相同的 space，因为您在其中有文本。您的 css 和名称中的 "bg" 让我觉得您可能复制了来自某处的模板，但误解了 bgbox 的初衷？）

旁注：您在 body 标签外有一些 HTML。我认为您对 "head" 和 "head" 感到困惑，前者是 HTML 的一部分，用于描述页面并可能链接到资源，而 "header" 只是带有语义信息的 DIV被例如使用搜索引擎。

Answer 3

示例如下：

html {
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
}

main {
  padding-bottom: 30px;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
}

<body>
  <header>
   header
  </header>
  <main>
   main
  </main>
  <footer>
   footer
  </footer>
</body>

Answer 4

我不知道如何标记他，但我希望 Edward D 找到答案！我首先尝试删除所有“height:100%;”这并没有立即解决问题，但显然是我的一个错误，因为它使“.body”和“.html 100%" 分辨率因此使所有其他 "position:absolute;" div 根据它移动。但真正的问题是 Bgbox 也是绝对的。一旦我做到了“position:relative;”，“#footer”就根据它定位了自己。非常感谢爱德华 D 和所有试图提供帮助的人！

无法在页面底部设置页脚

Can't set footer at the bottom of the page

html

css

footer