计算 margin-top 值以占据流体设计中的剩余高度

Question

基本上，容器具有流体高度和宽度。请考虑以下事项：

<div class="container">
   <span class="header">Hello!</span>
   <div class="box"></div>
   <div class="box"></div>
</div>

两个 box div 各占 40% 高度，假设我为 span 元素应用 15% 高度，其余 5% 为其 margin-top 值应用。正如预期的那样，它不会达到 container 高度的 100%，因为 margin-top据我所知是根据宽度计算的。在这种情况下，我如何计算 margin-top 百分比值，以便所有元素（包括边距）总和等于 container 的整个高度？这是我的 CSS 代码，在此先感谢。

.container {
    height: 80%;
    width: 80%;
}

.header {
    height: 15%;
    display: inline-block;
    margin-top: 5%;         /*how to calculate this correctly*/   
}

.box {
    height: 40%;
}

Answer 1

我认为你可以通过在 header 上使用 flexbox 和 margin-top:auto 轻松获得你想要的东西:

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

.container {
  height: 80%;
  width: 80%;
  display:flex;
  flex-direction:column;
  border:1px solid;
  box-sizing:border-box;
}

.header {
  flex:0 0 15%;
  background:red;
  align-self: flex-start; /* To have same visual behavior as inline-block */
  margin-top:auto /* this will do the trick*/
}

.box {
  flex:0 0 40%;
  background:yellow;
}

<div class="container">
  <span class="header">Hello!</span>
  <div class="box">a</div>
  <div class="box">b</div>
</div>

Answer 2

我更喜欢@Temani 的 flexbox 解决方案，但如果您需要支持不支持 flexbox 的旧版浏览器（如 IE）。

您可以在 header 之前添加一个空 span 或使用伪 css 元素并为其指定 5% 的高度，这将为您提供相同的边距顶部效果，即使对于旧浏览器也是如此.

html,
body{
  height:100%;
}

.container {
   display:inline-block;
   height: 80%;
   width: 80%;
   background-color:red;
}

.container:before {
  content:" ";
  display:inline-block;
  width:100%;
  height:5%;
  background-color:red
}

.header {
   height: 15%;
   width:100%;
   display: inline-block;
   background-color:blue
}

.box {
   display:inline-block;
   width:100%;
   height: 40%;
   background-color:green
}

<div class="container">
  <span class="header">Hello!</span>
  <div class="box">1</div>
  <div class="box">2</div>
</div>

计算 margin-top 值以占据流体设计中的剩余高度

Calculating margin-top value to occupy remaining height in fluid design

html

css

margin

fluid-layout