时间戳

首页 > 解决方案 > 页脚不在页面底部，正文显示设置为 flex

html - 页脚不在页面底部，正文显示设置为 flex

问题描述

我的 HTML 布局如下所示：

body //display: flex
   nav //flex-basis: 85px
   main //flex-grow: 1
   footer //flex-basis: 50px

  1. 在桌面视图中，页脚位于底部：但如果内容增长，稍后页脚不再位于底部，页面底部和页脚末尾之间存在间隙。

  2. 在手机上，您可以立即看到差距。

我正在使用display: flex并寻找一种方法来确保页脚始终保持在底部。

她的布局CSS：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

nav {
  flex-basis: 85px;
}

.main {
  flex-grow: 1;
}
footer {
  flex-basis: 50px;
  background-color: #10182f;
  color: white;
  padding: 15px 0;
}

提前致谢

这里有一些图片需要澄清： 普通桌面视图： 普通桌面视图

更长的视口： 长桌面视图

普通手机： 普通移动视图

标签： htmlcssflexboxejsflex4

解决方案

更好的方法是不使用flex. 您需要做的就是使用calc.

示例： https ://codepen.io/seanstopnik/pen/1e41196f62be22d881a4fe61e25c82da

body {
  margin: 0;
}

header {
  height: 80px;
  background: red;
}

main {
  min-height: calc(100vh - (80px + 50px));
}

footer {
  height: 50px;
  background: blue;
}
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>

推荐阅读