Question

我阅读了为此提出的大部分问题，但它们似乎不起作用。特别是这两个似乎是我追求的，但我不希望页脚固定在视口的底部。

How to keep footer always at the bottom of a page?

How to keep always at the bottom of page,( not screen) in html5

这是我的HTML。我在Laravel 5.3的Blade模板引擎中构建，但是使用Bootstrap：

＆＃13;

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #d3e0e9;
  overflow: auto;
  padding: 5px 0 5px 0;
  p {
    margin: 0px;
  }
}

＆＃13;

<footer class="footer">
  <div class="container">
    <p>Stuff</p>
  </div>
</footer>

＆＃13;

编辑：尝试澄清我在这里要求的内容，并删除了上面提到的更改视口大小的参考。这是造成混淆的原因，并且最终与我的要求无关。

暂时不能将fixed从桌面上移除，因为这不是一个解决方案：我不总是希望页脚底部的页脚无论内容如何。

假设视口在桌面上始终是全屏的。

假设第一页的内容非常少，并且内容位于内容之下。

Relative在页脚底部和视口底边之间留下了一个难看的间隙。

Absolute将其置于底部边界。这似乎是内容很少的网页的正确选项。

现在假设一个具有相同页脚的新页面，但是有大量内容在浏览器中滚动了几页。

Absolute（至少当我使用它时）往往会停留在视口的底部，而不是低于内容。

Relative会将其置于内容之下，并将成为此问题的解决方案。

但现在它无法使用内容很少的页面。

似乎我需要混合使用这两个，但唯一想到的是使用JQuery，测试内容是否通过视口的底部边缘。如果是，请将CSS更改为默认绝对值的相对值。

似乎只有通过CSS才能实现这一目标。

Answer 1

https://jsfiddle.net/jxg3c6ue/

如果使用相对绝对位置关系。但我不会建议这种编程方式。媒体查询最适合您的项目。但是，我只想回答如何以其他方式完成。

* {
  margin: 0;
  padding: 0;
}

body, html {
  position: relative;
  min-height: 100vh;
  padding-bottom: 18px;
  box-sizing: border-box;
}

footer {
  position: absolute;
  bottom: 0;
  background: red;
}

<div class="body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
  <p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
  <p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
  <p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
  <p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
  <p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
  <p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
  <p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
  <p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus justo, consequat non accumsan a, condimentum vel ipsum. Fusce ac leo tristique, fermentum orci a, suscipit massa. Curabitur dignissim metus ligula, sit amet convallis risus elementum quis. Donec in nunc vitae quam vestibulum malesuada nec vitae ipsum. Ut quis nulla elit. Duis luctus dictum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus mollis, tellus quis interdum facilisis, enim ligula pulvinar sem, id congue sapien dui at sapien. Fusce aliquam neque ac justo blandit volutpat. Curabitur et hendrerit tellus. Duis risus massa, commodo id consectetur dapibus, laoreet id ligula.</p>
  <p>Aliquam cursus turpis in quam aliquam pretium. Pellentesque urna est, pulvinar non ultrices a, tincidunt at dolor. Quisque a libero ut nunc commodo pulvinar a ac tortor. Nulla quis faucibus mi. Vivamus tempor mauris id justo bibendum interdum. Ut condimentum tempus ipsum quis finibus. Vivamus ut scelerisque purus, sed condimentum turpis. Nam fermentum sit amet erat ac bibendum.</p>
  <p>Integer quis euismod massa. Morbi ornare ante a risus pharetra tincidunt. Phasellus tincidunt molestie eros, id tristique leo pharetra at. Curabitur pharetra maximus rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat eget lorem non sollicitudin. Morbi fringilla eget quam nec tempus. Cras id porttitor tortor. Mauris rhoncus rhoncus tincidunt. Nulla facilisi. Mauris tempus dolor ac libero consequat, at commodo ipsum pulvinar. Maecenas ullamcorper lacinia nisi, nec consectetur libero auctor nec. Suspendisse consectetur ex non justo sollicitudin tempor. Curabitur semper, diam et hendrerit molestie, libero quam porta ligula, et viverra velit magna nec lectus. Aliquam nec sem ultrices, gravida lacus eget, scelerisque mauris.</p>
  <p>Sed vitae est eu leo aliquam aliquet id vitae tellus. Donec efficitur, dui vitae mollis interdum, dui purus lobortis nulla, sed egestas enim nulla eu neque. Fusce placerat nisi quis nisi dictum egestas. Pellentesque vel convallis nulla. Donec ac nisi at nibh aliquam congue finibus id mi. Morbi pulvinar laoreet massa sed aliquet. Cras efficitur, sapien vel gravida ultricies, nisi tellus mollis est, sed faucibus quam justo vehicula metus. Nunc vulputate nulla quis lectus fermentum egestas. Nunc fermentum sapien ut ex fringilla imperdiet. Vestibulum quis mi vel tellus pretium commodo. Praesent nulla elit, viverra ac efficitur at, euismod sed dui. Ut a leo nec arcu tempus ultricies eu ac ipsum. Nunc vulputate eu nulla quis pharetra. Nunc iaculis, nibh congue vulputate tincidunt, arcu nisl vestibulum mi, at rutrum ipsum neque non augue. In augue dolor, imperdiet eu faucibus non, mattis at ipsum. Nulla facilisi.</p>
  <p>Quisque fringilla non sem eget faucibus. Cras nec nulla sit amet est cursus efficitur. Proin euismod nibh ut arcu maximus maximus. Nunc consectetur libero ac enim imperdiet, luctus tincidunt magna aliquam. Donec eleifend porttitor pretium. Nullam urna nisl, facilisis id pretium et, commodo ut neque. In id elit urna. Vivamus tincidunt est sed ligula condimentum sagittis. In vel lobortis diam. In nulla sem, dictum a nisl vitae, pretium malesuada felis.</p>
</div>

<footer>
  this is a footer
</footer>

没有内容

* {
  margin: 0;
  padding: 0;
}

body, html {
  position: relative;
  min-height: 100vh;
  padding-bottom: 18px;
  box-sizing: border-box;
}

footer {
  position: absolute;
  bottom: 0;
  background: red;
}

<div class="body">
  
</div>

<footer>
  this is a footer
</footer>

Answer 2

绝对和固定定位有一些很好的区别。你应该肯定谷歌它更好地理解。同时，简而言之，绝对定位分别是父相对/绝对位置。

我不清楚问题，因为它的工资太高，无法阅读。希望你看起来像。页脚始终位于视口底部。

＆＃13;

.viewFooter{
  background:#ddd;
  color:#3d3d3d;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  font-size:16px;
  text-align:center;
  padding:10px
}
body{
  margin:0;
  height:calc(1000px - 40px);
  position:relative
}

＆＃13;

<div class="viewFooter">
  This will be positioned at the bottom of the view Port
</div>

＆＃13;

停留在视口底部的页脚

＆＃13;

.pageFooter{
  background:#ddd;
  color:#3d3d3d;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  font-size:16px;
  text-align:center;
  padding:10px
}
body{
  margin:0;
  height:1000px;
  position:relative
}

＆＃13;

<div class="pageFooter">
  This will be positioned at the bottom of the page
</div>

＆＃13;

如果要在不同视口中的绝对位置和固定位置之间切换。使用媒体查询。上面给出的将转向移动设备中的绝对定位

＆＃13;

.viewFooter{
  background:#ddd;
  color:#3d3d3d;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  font-size:16px;
  text-align:center;
  padding:10px
}
body{
  margin:0;
  height:1000px;
  position:relative
}
@media only screen 
  and (max-width: 600px) {
    .viewFooter{
      position:absolute;
    }
  }

＆＃13;

<div class="viewFooter">
  This will be positioned at the bottom of the view Port
</div>

＆＃13;

确保页脚div直接附加到body标签。

页脚始终位于内容的底部，如果视口底部的内容不够

2 个答案: