将容器流体固定在固定顶部和固定底部之间

Question

我正在使用Bootstrap 4作为响应模板。我使用引导程序4的固定顶部和固定底部类修复了页眉和页脚。

现在，我想在页眉和页脚之间修复容器类，以便我的内容可以固定或可以在该容器中滚动而不会干扰页眉和页脚

谢谢，请提出建议或帮助。

Answer 1

如果已知页眉和页脚的高度，请使用空白：

const strs = [
'12333',
'222',
'1233334333',
'11',
'12344',
'123333'];
const re = /(^|(\d)(?!\2))(\d)\3{2}$/;
strs.forEach(str => {
  if (re.test(str)) console.log('pass ' + str);
});

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

footer {
  background: green;
  height: 70px;
}

.container {
  background: white;
  margin-bottom: 70px;
  margin-top: 100px;
}

Answer 2

您也可以在中间容器上使用固定顶部，但是它应该有足够的边距以免与页眉和页脚重叠。

.container-fixed {
	background: yellow;
	margin: 40px 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
Header
</nav>
<nav class="fixed-top container-fixed">
Content
</nav>
<nav class="navbar navbar-expand-md navbar-dark fixed-bottom bg-dark">
Footer
</nav>