Question

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

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

两个box div分别表示高度为40％，假设我为span元素应用了15％的高度，并为其margin-top值应用了剩余的5％。正如预期的那样，自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

我认为您可以在margin-top:auto上使用flexbox和header轻松获得所需内容：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

你可以在标题之前添加一个空的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>

计算保证金最高值以占据流体设计中的剩余高度

2 个答案: