例如一个页面一个元素需要占百分之百高度或者两个元素需要各占50%高度，直接给元素加上height:100%，在父元素有固定高度情况下可行的。没有父元素也就是说父元素就是body，这时候需要给页面的html以及body设置高度，再给元素设置百分比高度。
<body>
<div class="divTest_one">
</div>
<div class="divTest_two">
</div>
</body>
<style>
html,body{
height: 100%;
margin: 0; /* 需要清除body自带的外边距 */
}
.divTest_one,.divTest_two{
width: calc(100% - 2px);
height: calc(50% - 4px); /* 边框占了4个像素 */
border: 1px solid red;
}
</style>
第二种写法可以使用vh（浏览器可视区域及视口的高度，1vh=视口的1%高度）
<body>
<div class="divTest_one">
</div>
<div class="divTest_two">
</div>
</body>
<style>
html,body{
margin: 0; /* 需要清除body自带的外边距 */
}
.divTest_one,.divTest_two{
width: calc(100% - 2px);
height: calc(50vh - 4px); /* 边框占了4个像素 */
border: 1px solid red;
}
</style>
本文地址：https://blog.csdn.net/qq_29039105/article/details/107357616
