Question

我已经尝试了一切，让我的照片贴在页面底部，但我的下面还有这个空白区域。

这是我的html结构：

<html>
  <body>
    <div id="wrapper">
      <header>
      </header>
      <div id="main">
      </div>
    </div>
    <footer>
    </footer>
  </body>
</html>

css：

#wrapper {
margin:0 auto;
width:1350px;
background-color:#fff;}

#main {
margin:0 auto;
width:1200px;
position:relative;}

footer {
clear:both;
background-color:#484545;
height:120px;
width:100%;
position:absolute;
bottom:0px;
left:0px;}

到目前为止我尝试过的事情：

页脚内包装，包装位置：相对，页脚位置：绝对;底部：0像素。不起作用，页脚出现在主要内容的中间。
内部的页脚。与上述相同。
页脚外包装。
推
#main的边距和填充与页脚高度相同。
到目前为止我研究过的几乎所有内容。

¿任何帮助plesase？

提前谢谢。

PS：对不起我的英语，我不是母语为英语的人。

解决：页脚内部被遗忘的div位置：相对底部：10px使整个页脚向上移动一点，在其下方创建此空白区域。

Answer 1

您需要设置body的尺寸以填充视口html，然后，您的绝对定位将起作用：

html{
    width:100vw,
    height:100vh;
    margin:0;
}

或者如另一个答案中所述 - 您可以设置position:fixed，尽管就元素与其他内容的显示方式而言，这会有不同的行为。

＆＃13;

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
}
footer {
  height: 20px;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: blue;
}

＆＃13;

<footer></footer>

＆＃13;

Answer 2

你的代码正在运作。我已经用你的代码创建了一个jsfiddle并且工作正常。 https://jsfiddle.net/jithinnjose/270oa889/

＆＃13;

#wrapper {
  margin: 0 auto;
  width: 1350px;
  background-color: #fff;
}
#main {
  margin: 0 auto;
  width: 1200px;
  position: relative;
}
footer {
  clear: both;
  background-color: #484545;
  height: 120px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

＆＃13;

<div id="wrapper">
  <header>
  </header>
  <div id="main">
  </div>
</div>
<footer>
</footer>

＆＃13;

Answer 3

你想要的是“位置：固定;”而不是“绝对的”。

footer {
clear:both;
background-color:#484545;
height:120px;
width:100%;
position:fixed;
margin-bottom: 0px;
bottom:0px;
left:0px;}

Answer 4

尝试

position:fixed;

页脚或为页脚创建单独的div并将上述css分配给该div

Answer 5

使用flexbox尝试这种魔力。

JSBIN

<强> HTML

<div class="container">
<header role="banner"></header>
<main role="main">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>

<强> CSS

html, body {
  height: 100%;
  min-height: 100%;
}
body {
  margin: 0;
  display: flex;
  flex-direction:column;
}
.container {
  overflow-y: scroll;
  flex: 1;
}
header[role="banner"] {
  height: 48px;
  background-color: purple;
}
main[role="main"] {
  background-color: deeppink;
  flex: auto;
}
footer[role="contentinfo"] {
  flex-basis: 48px;
  background-color: gold;
}

Answer 6

好的，我修好了!!!

我的愚蠢没有限制。有时你只是专注于尝试修复一件事，而你却没有找到合适的地方!!

事情是我在页脚里面有一个被遗忘的div，位置是相对的。这迫使我的页脚向上移动，在它下方创建了这个空白区域。

非常感谢你的时间，真的，非常感谢，你没有机会解决我的问题，因为我忘记的div没有发布在这里，但你确实让我想到了开箱即用。

干杯！

无法将页脚粘到底部。 CSS

6 个答案: