css - 在文档高度内安装两个 <div>

Question

我正在尝试布局一些 html <div>图片中的元素:

这里的问题是#container height。将其设置为固定值或百分比，它将在底部留下空白区域或绕过 html 高度。

我尝试将其设置为 90%(#title 为 10%)，但它并不准确，具体取决于客户高度； 我到目前为止是这样的:

body, html{ height: 100%; margin: 0px}
#container{ height: 90%; overflow: scroll;}

考虑到#title 高度也可能不同，是否可以使用 css 来适应 #title和 #container在 html 里面？

Answer 1

两个选项，flex 显示或 CSS calc 运算符。

如果您知道在任何给定情况下您的 header 将是什么，您可能会更容易地解决这个问题。在这种情况下，您可以像这样使用 calc:

header {
  height: 190px; /* Or whatever you'd like it to be */
}
.container {
  height: calc(100% - 190px); /* Where 190px is whatever height the header is set to */
  overflow: auto; /* Or scroll, if you want the scrollbar always visible */
}

在不太理想的情况下，您需要使用 flex 来显示 flexbox。

看起来像这样:

body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
header {
  height: 10%; /* Or whatever */
  flex: none;
}
.container {
  align-self: flex-end;
  flex: 1 0 100%;
}

让我们来看看那个。如果您想要更广泛的支持，它缺少您需要的大多数特定于供应商的内容，但现在几乎所有主流浏览器都支持 flex 显示。

首先我们将body设置为display: flex，它通知浏览器这是一个flex布局.我们还设置了 flex-direction 和 flex-wrap。这些属性应该是不言自明的。

其次我们将标题设置为固定显示。我们通过 height: 10% 来做到这一点，但是这个值可以是你想要的任何值。 flex: none 告诉浏览器这个元素在 flex 的上下文中是不可变的。如果您将显示器想象成一条河流，那么这就是坐在河中间的一 block 石头。

第三 我们使用align-self: flex-end 将容器设置为在页面底部对齐。这样一来，无论页面上的其他元素如何，它总是位于底部。这不是非常重要，因为我们没有包装(在 body 元素中设置)但我们在这里覆盖了基础。重要的部分是 flex: 1 0 100%。简单地说，这是在说:

1. 相对于所有其他 flex 元素增长到 1 (100%) 的系数(在这个简单的例子中没有)。
2. 根本不收缩(收缩到 0 倍数)。
3. 将默认高度设置为 100%(或尽可能接近它)。

希望对您有所帮助!