页脚不会粘在页面底部 [英] footer will not stick on bottom of page

问题描述

我试图创建一个页面，我试图让页脚粘在页面的底部。它会坚持但问题是，如果浏览器将被最小化，页脚将通过页面的内容，但实际上我希望它保持在页面的底部，当浏览器被最小化，将有一个滚动条。

当浏览器被最小化时会发生什么？

以下菜单也会发生这种情况：

任何人都可以提示我哪些设置有误？
我使用这个设置：

 < div id =wrapper> 
< div id =header>< / div> 
< div id =content>< / div> 
< div id =footer>< / div> 
< / div> 
  

这是代码：

a href =https://jsfiddle.net/k6ocuw69/1/ =nofollow noreferrer> https://jsfiddle.net/k6ocuw69/1/

感谢您的帮助

解决方案

这是你想达到的目标吗？

  html {height：100％; box-sizing：border-box;} *，*：before，*：after {box-sizing：inherit;} body {position： margin：0; padding-bottom：5rem; min-height：100％; background-color：＃f2f2f2;}。header {width：100％; padding：10px 0; margin-bottom：20px;背景颜色：灰色text-align：center;}。header h3 {margin：0; color：white;}。content {background-color：#ffffff; margin：0 auto; padding：20px 15px; max-width：640px; width：94％;}。footer {position：absolute; right：0; bottom：0; left：0; padding：1rem;背景颜色：灰色text-align：center;}  

 < div class = header> < h3>这是标头< / h3>< / div>< div class =content> < h1>页脚示例< / h1> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。例如，在一个实施例中， Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。例如，在一个实施例中， < / p> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。例如，在一个实施例中， < / p>< / div>< div class =footer>此页脚始终位于页面底部，但< strong&不固定。< / div>  

你的演示有这么多的东西，我更容易从头做一个全新的例子，但这应该很容易实现任何结构。

注意：根据您的页脚高度，您需要将 padding-bottom：5rem; 设置为 body

玩弄玩法： https：// jsfiddle。 net / thepio / rfy0a4Lt /

I am trying to create a page on where i try to let the footer stick at the bottom of the page. It will stick but the problem is that if the browser will be minimized that the footer will go through the content of the page, but actually i want that it stays at the bottom of the page and when the browser is minimized that there will be a scroll bar.

A picture what happens when browser is minimized:

If the browser is big enough then it is ok:

This also happens with the menu:

Can anyone hint me which settings are wrong? I use this setup:

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

This is the code:

https://jsfiddle.net/k6ocuw69/1/

Thanks for help

解决方案

Was this what you were trying to achieve?

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 5rem;
  min-height: 100%;
  background-color: #f2f2f2;
}

.header {
  width: 100%;
  padding: 10px 0;
  margin-bottom: 20px;
  background-color: grey;
  text-align: center;
}

.header h3 {
  margin: 0;
  color: white;
}

.content {
  background-color: #ffffff;
  margin: 0 auto;
  padding: 20px 15px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: grey;
  text-align: center;
}

<div class="header">
  <h3>This is the header</h3>
</div>

<div class="content">
  <h1>Footer example</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong> is not fixed</strong>.</div>

Your demo had so much stuff that it was easier for me to do a totally new example from the scratch but this should be easily implemented to any stucture.

Note: You need to set the padding-bottom: 5rem; to body according to your footer height.

Fiddle to play with: https://jsfiddle.net/thepio/rfy0a4Lt/

这篇关于页脚不会粘在页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！