我试图在CSS中设置一个<div>
到一定的百分比高度,但它只是保持与里面的内容相同的大小。然而,当我去掉HTML 5的<!DOCTYTPE html>
时,它却能工作,<div>
如愿以偿地占满了整个页面。我想让这个页面生效,那么我应该怎么做?
我在<div>
上有这个CSS,它的ID是page
:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
我想在CSS中把一个div设置成某个百分比的高度
什么的百分比?
要设置百分比高度,其父元素(*)必须有一个明确的高度。这一点是不言而喻的,因为如果你将高度设为 "自动",块就会采用其内容的高度......但如果内容本身的高度是以父元素的百分比来表示的,你就给自己制造了一个小小的陷阱。浏览器会放弃,只使用内容的高度。
所以div的父节点必须有一个明确的`高度'属性。虽然这个高度也可以是一个百分比,如果你想的话,这只是把问题提升到了一个新的层次。
如果你想让 div 的高度是视口高度的百分比,那么 div 的每个祖先,包括 <html>
和 <body>
,都必须有 height: 100%
,所以有一个明确的百分比高度链,一直到 div。
(*: 或者,如果DIV被定位了,"包含块 "也被定位了,它是最接近的祖先。)
另外,所有现代浏览器和IE>=9支持相对于视口高度(vh
)和视口宽度(vw
)的新CSS单位:
div {
height:100vh;
}
参见这里更多信息。
你需要在<html>
和<body>
元素上也设置高度,否则,它们只会大到足以容纳内容。[例如][1]: