Question

我目前正在开设一个网站，有时（例如当加载方块出现时 - 如下图所示）主要内容div太小，无法用页脚/标题填充整个页面。

我希望当内容div太小时，页眉和页脚之间的主要内容会拉伸，以便填充整个屏幕，同时保持页脚和页眉在视图中。

我尝试了许多不同的方法来做到这一点，但到目前为止一切都无济于事。下图说明了我的问题。

HTML布局如下所示：

<body>
  <div class="nav-container"></div>
  <div class="main-container"></div>
  <footer></footer>
</body>

Answer 1

如果你熟悉flexbox，那就可以了：

<body>
  <header></header>
  <div class="main-container"> Main content </div>
  <footer></footer>
</body> 

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header, footer {
  flex: none;
}

.main-container {
  flex: auto;
}

当内容小/空时，使内容容器div伸展

1 个答案: