如何在CSS中设置垂直高度？

Question

我需要为完整背景的正确元素赋予垂直高度。我试着设置

  

高度：100％;   最大高度：100％

但该元素仅采用内容高度

.full_container {
    	height: 350px;
        border: 1px solid #ddd;
    }
    .pull-left {
    	float: left;
    }
    .width50 {
    	width: 50%;
    }
    .inline_height {
    	color: #fff;
       	padding: 10px;
    	background: #333;
    }
    .height100 {
    	padding: 10px;
    	height: 100%;
        max-height: 100%;
        background: #e8e8e8;
    }

<div class="full_container">
	<div class="clearfix">
    	<div class="pull-left width50">
        	<div class="inline_height">
            	Content height only
            </div>
        </div>
        <div class="pull-left width50">
        	<div class="height100">
            	<div>I need to show this div element height to 100%</div>
            </div>
        </div>
    </div>
</div>

Answer 1

尝试为.clearfix班级display:flex和height:100%

.clearfix {
  display: flex;
  height: 100%;
}

以下示例

＆＃13;

＆＃13;

.full_container {
  height: 350px;
  border: 1px solid #ddd;
}

.pull-left {
  float: left;
}

.width50 {
  width: 50%;
}

.inline_height {
  color: #fff;
  padding: 10px;
  background: #333;
}

.height100 {
  padding: 10px;
  height: 100%;
  max-height: 100%;
  background: #e8e8e8;
}

.clearfix {
  display: flex;
  height: 100%;
}

＆＃13;

<div class="full_container">
  <div class="clearfix">
    <div class="pull-left width50">
      <div class="inline_height">
        Content height only
      </div>
    </div>
    <div class="pull-left width50">
      <div class="height100">
        <div>I need to show this div element height to 100%</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

看到这个：  我为display: flex

添加了.full_container

＆＃13;

＆＃13;

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.full_container {
  height: 350px;
  border: 1px solid #ddd;
  display: flex;
}

.pull-left {
  float: left;
}

.width50 {
  width: 50%;
}

.inline_height {
  color: #fff;
  padding: 10px;
  background: #333;
}

.height100 {
  padding: 10px;
  height: 100%;
  max-height: 100%;
  background: #e8e8e8;
}

＆＃13;

<div class="full_container">
    <div class="pull-left width50">
      <div class="inline_height">
        Content height only
      </div>
    </div>
    <div class="pull-left width50">
      <div class="height100">
        <div>I need to show this div element height to 100%</div>
      </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;