Question

所以我正在创建一个网站，无论我做什么，我都无法按照我想要的方式行动，我希望它能够位于页面的最底层（不浮动）所以它无法看到如果有一个页面内容丰富。我已经尝试了很多东西，并且四处寻找，但找不到我需要的答案，对不起，如果这是重复的话。这是我的CSS代码，以及我的html的结构。

这是我的CSS：

footer {
bottom: 0;
height: 10%;
min-height: 75px;
left: 0;
position: absolute;
width: 100%;
text-align: center;
background: #CAA400;
vertical-align: middle;
color: #232323;
}

这是我的HTML（结构）：

<head>
</head>
<body>
  <div>
   lots of random stuff
  </div>
 <footer id="foot"><p></p></footer>
</body>

我尝试过使用position: fixed，absolute，relative等许多内容，但我似乎无法弄明白。我认为这可能是我的CSS中可能是父容器的问题，但我不确定，任何额外的输入也会有所帮助，谢谢。

Answer 1

当你想选择html标签时，请使用document.querySelector（）。因为你已经在你的css文件中给它一个id，你需要按id选择元素。如果这没有用，请在高度上使用％。现在，就高度而言，它总共加起来达到100％，它应该是响应性的。

#foot {
bottom: 0;
height: 10%;
min-height: 75px;
left: 0;
position: absolute;
width: 100%;
text-align: center;
background: #CAA400;
vertical-align: middle;
color: #232323;
}

例如：

navbar {height: 10%}
body {height: 80%}
footer {height: 10%}

Answer 2

好的，这是片段 -

top

我在内容中添加了ID。然后我使用JS来检测它的高度并根据需要设置页脚的var top = $('#content').height(); if(top > $(window).height()) { $('#foot').css('top', top+'px'); }属性。

echo $editor_data;

你的其他CSS保持不变。

以下是样本 -

https://jsfiddle.net/v7tvxcxc/

https://jsfiddle.net/v7tvxcxc/1/

检查两个小提琴。第一个是内容高度低于窗口高度。而第二个恰恰相反。

Answer 3

如果你可以在标记上添加一个垫片，你可以将身体的最小高度设置为100vh，然后绝对定位页脚。不要忘记你需要position:relative;身体让一切正常流动！

footer {
bottom: 0;
height: 10%;
min-height: 75px;
left: 0;
position: absolute;
width: 100%;
text-align: center;
background: #CAA400;
vertical-align: middle;
color: #232323;
}
#foot_spacer{
  height: 10%;
  min-height:75px;
}
body{
  min-height:100vh;
  box-sizing:border-box;
  position:relative;
  margin:0;
}

<body>
  <div>
   lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff lots of random stuff 
  </div>
  <div id='foot_spacer'></div>
 <footer id="foot"><p></p></footer>
</body>

我还建议将页脚（和间隔）高度调整为10vh而不是10％，这样一篇非常长的文章就不会给你一个非常高的页脚。

使用jsfiddle的大小更容易玩，所以也可以尝试

小提琴： https://jsfiddle.net/trex005/v8rct2ue/

我无法让这个页脚停留在页面的最底部

3 个答案: