Question

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

图片在最小化浏览器时会发生什么：

如果浏览器足够大，那就可以了：

菜单也会出现这种情况：

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

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

这是代码：

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

感谢您的帮助

Answer 1

您需要使用position:fixed

检查the fiddle here

编辑：好的，也许当你说“修复”时我理解错了。 try this并查看这是否是您要找的内容。您可以向内容添加文本，但它仍然不会被页脚重叠。

Answer 2

这是你想要实现的吗？

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>

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

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

小提琴玩：https://jsfiddle.net/thepio/rfy0a4Lt/

Answer 3

从inline-block
修复wrapper
<h2>...</h4> div比你的页脚更高，增加页脚高度

结果是https://jsfiddle.net/8odoros/k6ocuw69/5/

Answer 4

您可以使用以下代码完成此操作：

HTML

<div class="wrapper">
  <header class="header">
    <h1>Page header</h1>
  </header>

  <section class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus mauris, egestas in eleifend sed, sagittis nec dolor. Cras auctor arcu ex. Quisque porttitor, dui vitae hendrerit pharetra, velit ante aliquet nisl, in malesuada diam arcu commodo mi. Sed aliquam nisi leo, a rhoncus enim volutpat ultricies. Etiam vitae nisi sit amet lectus fermentum dignissim. Cras ultricies nibh eu ipsum laoreet, vitae varius turpis varius. Donec hendrerit purus nec tortor suscipit commodo. Mauris metus arcu, viverra lacinia dapibus a, egestas vitae mauris. Nam ut faucibus ligula, vitae rhoncus massa. Proin non porttitor nibh. Aenean consequat est ac tortor lacinia suscipit in nec neque. Fusce semper ipsum ac felis interdum mollis. Proin faucibus ex non condimentum laoreet. Praesent sem sem, convallis sed enim vitae, suscipit finibus tortor.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus mauris, egestas in eleifend sed, sagittis nec dolor. Cras auctor arcu ex. Quisque porttitor, dui vitae hendrerit pharetra, velit ante aliquet nisl, in malesuada diam arcu commodo mi. Sed aliquam nisi leo, a rhoncus enim volutpat ultricies. Etiam vitae nisi sit amet lectus fermentum dignissim. Cras ultricies nibh eu ipsum laoreet, vitae varius turpis varius. Donec hendrerit purus nec tortor suscipit commodo. Mauris metus arcu, viverra lacinia dapibus a, egestas vitae mauris. Nam ut faucibus ligula, vitae rhoncus massa. Proin non porttitor nibh. Aenean consequat est ac tortor lacinia suscipit in nec neque. Fusce semper ipsum ac felis interdum mollis. Proin faucibus ex non condimentum laoreet. Praesent sem sem, convallis sed enim vitae, suscipit finibus tortor.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus mauris, egestas in eleifend sed, sagittis nec dolor. Cras auctor arcu ex. Quisque porttitor, dui vitae hendrerit pharetra, velit ante aliquet nisl, in malesuada diam arcu commodo mi. Sed aliquam nisi leo, a rhoncus enim volutpat ultricies. Etiam vitae nisi sit amet lectus fermentum dignissim. Cras ultricies nibh eu ipsum laoreet, vitae varius turpis varius. Donec hendrerit purus nec tortor suscipit commodo. Mauris metus arcu, viverra lacinia dapibus a, egestas vitae mauris. Nam ut faucibus ligula, vitae rhoncus massa. Proin non porttitor nibh. Aenean consequat est ac tortor lacinia suscipit in nec neque. Fusce semper ipsum ac felis interdum mollis. Proin faucibus ex non condimentum laoreet. Praesent sem sem, convallis sed enim vitae, suscipit finibus tortor.</p>
  </section>

  <footer class="footer">
    Page Footer
  </footer>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}

.wrapper {
  background-color: red;
  height: 100vh;
}

.header {
  background-color: blue;
  height: 10vh;
}

.content {
  background-color: yellow;
  height: 80vh;
  overflow-y: scroll;
}

p {
  font-size: 200%;
}

.footer {
  background-color: green;
  height: 10vh;
}

Codepen link

页脚不会粘在页面底部

4 个答案: