页面内容不足时Footer无法固定于视窗底部的技术求助

我一眼就看出问题所在啦——你的布局结构层级错了，导致footer被挤到了视口外面，必须滚动才能看到。咱们一步步来修复：

问题根源 #

你给html, body, #root, .app都设了height:100%，这会让.app占满整个视口高度。但你的.footerWrap是和.app平级的兄弟元素，不是放在.app内部和.wrapper同级，所以.app占满视口后，.footerWrap只能排在它下面，自然就超出了当前视口范围，得滚动才能看到。

另外，你的负margin方案需要footer的高度和你设置的-100px对应，最好给footer明确设置高度，避免布局偏移。

修复后的代码 #

修改后的HTML结构（调整footer位置） #

<body>
  <div id="root">
    <div class="app">
      <div class="wrapper">
        <div class="nav">
          <div>
            <header class="header">
              <div>
                <ul>
                  <li>Title</li>
                </ul>
              </div>
              <div>
                <ul>
                  <li>About</li>
                </ul>
              </div>
            </header>
          </div>
        </div>
      </div>
      <!-- 把footerWrap移到.app内部，和wrapper同级 -->
      <div class="footerWrap">
        <div>
          <footer>
            <div class="copyright">
              <div class="text">© 2018 Footer</div>
            </div>
          </footer>
        </div>
      </div>
    </div>
  </div>
</body>

调整后的CSS（补充footer高度，完善布局） #

html, body, #root, .app { 
  height: 100%;
  /* 去掉默认边距，避免布局出现滚动条 */
  margin: 0;
  padding: 0;
}

.wrapper { 
  min-height: 100%; 
  margin-bottom: -100px; 
  padding-bottom: 100px;
}

/* 给footer明确设置高度，和负margin值一致 */
.footerWrap { 
  background-color: green; 
  padding-top: 15px; 
  width: 100%;
  height: 100px; /* 这里的高度要和wrapper的margin-bottom/padding-bottom对应 */
  box-sizing: border-box; /* 确保padding不会额外增加高度 */
}

原理说明 #

这个方案的核心是让wrapper的min-height占满视口，用负margin把footer拉上来，同时用padding-bottom给footer留出占位空间，这样不管内容多少，footer都会固定在视口底部：

• 当内容不足时，wrapper占满视口，footer被负margin拉到视口底部
• 当内容超过视口时，wrapper会被内容撑高，footer自然会跟在内容下方

内容的提问来源于stack exchange，提问作者stevew1