Question

我正在尝试使两个空的div元素占据整个高度，但是它不起作用。

这是一个小提琴： http://jsfiddle.net/jtzrbn8f/13

html,
body{
  height: 100%;
}

.left_side,
.right_side{
  background-color: #000;
  height: 100%
}

.content{
  background-color: #4c4c4c;
  color: #fff
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >

<div class="row">
  <div class="col-xs-2 left_side"></div>
  <div class="col-xs-8 content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus adipisci nobis aliquid ad illum. Quos iste accusamus vel omnis non vitae, culpa numquam officiis, veniam asperiores nostrum assumenda illum deserunt.
  </div> <!-- .col-xs-8 -->
  <div class="col-xs-2 right_side"></div>
</div> <!-- .row -->

我对此进行了搜索，一个可以接受的答案是给body和html height: 100%，另一个是给空div min-height，但是两者没用。

要使其正常工作，我必须将两个空height中的div从100%更改为-webkit-fill-available https://caniuse.com/#search=fill-available

我需要一个兼容的解决方案。

Answer 1

如果您想让div从字面上取整页面的整个高度，请仅将height：100vh 所以

 height:100vh;

Answer 2

请参阅下面的CSS将EqualHeighterBox类添加到Container Div，将EqualKid类添加到3个子级。这个对我有用。这是一个工作的小提琴https://jsfiddle.net/Padhoo0705/rx7auz3f/7/

     .EqualHeighterBox{
				display: -webkit-flex; 
				display:flex;
			} 
			.EqualKid{ 
				-webkit-flex: 1;
				-ms-flex: 1; 
				 flex: 1; 
			 }

<div class="EqualHeighterBox" style="width:600px;">
	<div class="EqualKid" style="width:200px; background-color:#FF9999;">Anu is a good girl</div>
	<div class="EqualKid" style="width:200px; background-color:#FF9900;">Anu is a good girl is a good girl is a good girl is a good girl</div>
	<div class="EqualKid" style="width:200px; background-color:#FFff00;">Anu is a good girl is a good girl is a good girl is a good girlis a good girl is a good girl is a good girlis a good girl is a good girl is a good girl</div>
</div>

Answer 3

请将此添加到您的CSS

.row {
    height: 100%;
}

空div不能占据整个高度

3 个答案: