如果站点有内容/没有内容，则页脚显示，不会保留在页面底部

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

＆＃13;

＆＃13;

/**
 * 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

另一个解决方案可能是有一个最小高度，但只有你有一个固定的高度页脚才有可能。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;