html怎么占全屏高度,css常见问题（1）之全屏高度

例如一个页面一个元素需要占百分之百高度或者两个元素需要各占50%高度，直接给元素加上height:100%，在父元素有固定高度情况下可行的。没有父元素也就是说父元素就是body，这时候需要给页面的html以及body设置高度，再给元素设置百分比高度。

html,body{

height: 100%;

margin: 0; /* 需要清除body自带的外边距 */

}

.divTest_one,.divTest_two{

width: calc(100% - 2px);

height: calc(50% - 4px); /* 边框占了4个像素 */

border: 1px solid red;

}

第二种写法可以使用vh(浏览器可视区域及视口的高度，1vh=视口的1%高度)

html,body{

margin: 0; /* 需要清除body自带的外边距 */

}

.divTest_one,.divTest_two{

width: calc(100% - 2px);

height: calc(50vh - 4px); /* 边框占了4个像素 */

border: 1px solid red;

}

本文地址：https://blog.csdn.net/qq_29039105/article/details/107357616