例如一个页面一个元素需要占百分之百高度或者两个元素需要各占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>