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