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;
}

如果您运行小提琴样本并调整显示的结果宽度，则页脚的高度不会保持固定。当您将其缩小时，页脚内的红色按钮不会保留在页脚内部。我怎样才能解决这个问题？万分感谢！

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

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

1 个答案: