html - 使用 flexbox 创建固定高度的页脚

Question

我正在使用具有 3 行的 flexbox 创建一个容器，其中包括页眉、正文和页脚。页眉和页脚的高度必须保持固定，而正文部分可以变化，如果其内容超过其可见高度，将提供滚动:

html

<div class="container">
  <div class="header">
  Header
  </div>
  <div class="contentBody">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="footer">
  <span class="footerMessage">Message goes here</span>
  <span class="footerBtn">OK</span>
  <span class="footerBtn">Cancel</span>
  </div>

CSS

.container {
  display: flex;
  flex-direction: column;
  max-height: 50vh;
}

.header {
  height: 20px;
  background-color: #c0c0c0;
}

.contentBody {
  flex-grow: 1;
  overflow-y: scroll;
}

.footer {
  background-color: #c0c0c0;
  display: flex;
  flex-direction: row;
}

.footerMessage {
  flex-grow: 1;
}

.footerBtn {
  padding: 5px;
  background-color: #ff0000;
  margin-left: 10px;
}

如果您运行 fiddle 示例并调整显示结果的宽度，则页脚的高度不会保持固定。当您缩小它时，页脚内的红色按钮不会保留在页脚内。我怎样才能解决这个问题？一百万!

https://jsfiddle.net/Deepview/bktwkcgk/3/

Answer 1

考虑将以下属性添加到您的 .footer:

.footer {
  background-color: #c0c0c0;
  display: flex;
  flex-direction: row;
  height: 20px;
  min-height: 20px;
  white-space: nowrap;
}

设置高度和最小高度将确保页脚保持固定，即使屏幕尺寸非常小，overflow: hidden 将确保页脚之外的元素不会出现(隐藏有问题的溢出元素)。 white-space: nowrap; 将避免您的页脚消息被截断并落入第二行。

Updated fiddle