Question

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

当我尝试＆＃34;亲戚＆＃34;页脚位于＆＃34; topbox＆＃34; （这是我的标题）当我尝试＆＃34;绝对＆＃34;它位于页面中间。

 <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，它是标题，Wrapper，scrollbtn（用于指示需要滚动的鼠标图片），bgbox（内容的背景），box2（内容），＆＃34; lorep ipsum＆＃ 34;是内容，并且非常长，使用户滚动。这就是我的问题，当您加载页脚时页脚位于页面底部，因此当您向下滚动时页脚位于页面的中间位置。

这是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%;
 }

我尝试了很多不同的事情（改变身高，包裹一切，相对的，绝对的，固定的，静态的......），我无法想到其他任何东西。我需要一个外在的观点。

Answer 1

以下是示例：

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 2

首先，您的代码输出不正确，这是正确的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 3

您想要根据父元素的底部来定位页脚。所以你必须给它一个位置：绝对

它会找到最近的父母不是＆＃34;静态＆＃34;相对于自己的位置。因此，目前它将位于＆＃34; body＆＃34;的底部。如果你想让它坐在＆＃34; .wrapper＆＃34;的底部，给.wrapper一个位置＆＃34; relative＆＃34;

编辑：好的，我看到＆＃34; bgbox＆＃34;的问题超越＆＃34;标题＆＃34;。

1。全部删除＆＃34;身高100％＆＃34; - 将高度设置为与视口相同（可见）

2。你的＆＃34; bgbox＆＃34;目前定位是绝对的 - 所以它不会被推下来＃34;通过其他内容，它不会随着它变大而推动其他内容。我不确定你打算在这里打算做什么。你想要＆＃34; bgbox＆＃34;成为页面常规内容的一部分？在这种情况下，使其位置：相对。（我认为你不希望其他内容占据与bgbox相同的空间，因为你有文本。你的css和名称中的＆＃34; bg＆＃34;让我觉得你可能复制了一个模板某个地方，但误解了bgbox的初衷？）

旁注：你在body标签之外有一些HTML。我认为你在＆＃34; head＆＃34;之间感到困惑。这是描述页面的HTML部分，可能链接到资源，＆＃34; header＆＃34;这只是具有语义信息的DIV，例如，搜索引擎。

Answer 4

我不知道如何标记他，但我希望Edward D找到答案！我首先尝试删除所有“高度：100％;”我没有马上解决问题，但显然是我的错误，因为它使“ .body ”和“ .html 100％”的决议从而使所有其他“的位置是：绝对;” divs根据它移动。但真正的问题是Bgbox也绝对存在。一旦我做出“ position：relative; ”，“＃footer”就会根据它自行定位。非常感谢Edward D和所有那些试图帮助的人！

无法在页面底部设置页脚

4 个答案: