Question

我需要第三个和第四个矩形具有相同的位置，但填充所有剩余的高度％，我不能改变最小高度：身体上的100％，html。使用css，html，下面的代码。

＆＃13;

  html, body{ min-height: 100%; }	
  * { margin: 0;}
	 
  div>div { 
	    float: left;
	    width: 50%; 
	}	 
  .rectangle-one{
		height: 100px;		
		background-color: red;
	}
  .rectangle-two{		  
		height: 100px;		
		background-color: black;
	}
  .rectangle-third{		
		height: 150px;
		background-color: green;
	}
  .rectangle-fourth{	
		height: 150px;
		background-color: yellow;
	}

＆＃13;

<!doctype html>

<html>
  
<body>
  <div > 
    <div class="rectangle-one"></div>
    <div class="rectangle-two"></div>
  </div> 
  
  <div > 
    <div class="rectangle-third"></div>
    <div class="rectangle-fourth"></div>
  </div> 
</body>

</html>

＆＃13;

Answer 1

简单地将第二行列包含在具有计算高度的父级中将完成工作。

＆＃13;

html,
body {
  min-height: 100%;
}
* {
  margin: 0;
}
div>div {
  float: left;
  width: 50%;
}
.row-first {
  overflow: hidden;
  height: 100px;
}
.row-second {
  position: absolute;
  top: 100px;
  bottom: 0;
  height: calc(100% - 100px);
  width: 100%;
}
.rectangle-one {
  height: 100px;
  background-color: red;
}
.rectangle-two {
  height: 100px;
  background-color: black;
}
.rectangle-third {
  background-color: green;
  height: 100%;
}
.rectangle-fourth {
  background-color: yellow;
  height: 100%;
}

＆＃13;

<!doctype html>

<html>

<body>
  <div class="row-first">
    <div class="rectangle-one"></div>
    <div class="rectangle-two"></div>
  </div>

  <div class="row-second">
    <div class="rectangle-third"></div>
    <div class="rectangle-fourth"></div>
  </div>
</body>

</html>

＆＃13;

Answer 2

显示：表格应该：

  html, body { 
        height: 100%;
        width:100%;
    }	
  * { 
        margin: 0;}
  body {
        display:table;  
        table-layout:fixed;
    } 
  body>div {
        display:table-row;
    }
  div>div { 
	    display:table-cell;
	    width: 50%; 
	}	 
  .rectangle-one{
		height: 100px;		
		background-color: red;
	}
  .rectangle-two{		  
		background-color: black;
	}
  .rectangle-third{		

		background-color: green;
	}
  .rectangle-fourth{	

		background-color: yellow;
	}

<!doctype html>

<html>
  
<body>
  <div class="container"> 
    <div class="rectangle-one"></div>
    <div class="rectangle-two"></div>
  </div> 
  
  <div > 
    <div class="rectangle-third"></div>
    <div class="rectangle-fourth"></div>
  </div> 
</body>

</html>

高度100％，最小高度100％

2 个答案: