html - 如果网站内容很少/没有内容，页脚会显示，不会保留在页面底部

Question

我目前在页面底部有一个页脚。问题是我不希望它被修复，我不希望它 100% 位于底部。但是我所做的一切都使它变得粘稠，位于底部的站点隐藏了底部的阴影，或者位于页面的中间。如果网站有内容，页脚就可以，但如果页面内容很少或没有内容，页脚就位于内容结束的位置，而不是页面底部。当页脚正确位于页面底部时，我正在添加页脚图像。如果页面没有内容，则它位于页面中间。

footer {
padding: 30px 0;
margin-top: 0;
background: #e9e9e9 url("../Images/noise.jpg") repeat;
border-top: 1px solid #dcdcdc;
font-size: 13px;
-webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.175);
box-shadow: 0 0 16px rgba(0, 0, 0, 0.175);

Answer 1

This blog has your solution

/**
 * Demo Styles
 */

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

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

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

/**
 * Footer Styles
 */

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

<div class="demo">
  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>

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

另一种解决方案可能是设置最小高度，但这只有在您有固定高度的页脚时才有可能。

所以你可以创建这样的布局:

.content {
  min-height: calc( 100vh - 80px )
}
.footer {
  height: 80px;
}

<div class="content">
 small or no content here
</div>
<div class="footer">
 footer here
</div>