我试图<div>在CSS中设置一个特定的百分比高度,但它只是保持与其中的内容相同的大小.<!DOCTYTPE html>但是,当我删除HTML 5 时,它可以工作,根据<div>需要占用整个页面.我希望页面验证,所以我该怎么办？
我有这个CSS <div>,其ID为page:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
bob*_*nce 357
我试图在CSS中将div设置为某个百分比高度
什么的百分比？
要设置百分比高度,其父元素(*)必须具有显式高度.这是相当不言而喻的,因为如果你将高度保持为高度auto,则该块将采用其内容的高度...但是如果内容本身具有以父母的百分比表示的高度,那么您自己做了一点Catch 22.浏览器放弃并仅使用内容高度.
因此div的父级必须具有显式height属性.虽然如果你想要的话,这个高度也可以是一个百分比,这只会将问题提升到一个新的水平.
如果你想让div高度占视口高度的百分比,div的每个祖先,包括<html>和<body>必须有height: 100%,所以有一个明确的百分比高度链到div.
(*:或者,如果div被定位,'包含块',也是最近的祖先也被定位.)
或者,所有现代浏览器和IE> = 9都支持相对于视口高度(vh)和视口宽度(vw)的新CSS单位:
div {
height:100vh;
}
在这里看到更多的信息.
Bri*_*ell 66
你还需要在<html>和<body>元素上设置高度; 否则,它们只会大到足以容纳内容.例如:
<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>Ole*_*nko 14
bobince的回答会让你知道在哪种情况下"身高:XX%;" 将会或不会工作.
如果要创建具有设定比率的元素(高度:它自身宽度的百分比),最好的方法是使用有效设置高度padding-bottom.方形示例:
<div class="square-container">
<div class="square-content">
<!-- put your content in here -->
</div>
</div>
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
方形容器将由填充物制成,内容将扩展以填充容器.2009年关于这个主题的长篇文章:http://alistapart.com/article/creating-intrinsic-ratios-for-video
您可以使用100vw / 100vh. CSS3 为我们提供了与视口相关的单位。100vw 表示视口宽度的 100%。100vh; 高度的 100%。
<div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
<div style="width:70%; height: 100%; border: 2px dashed red"></div>
<div style="width:30%; height: 100%; border: 2px dashed red"></div>
</div>
你好！为了使用百分比（％），您必须定义其父元素的百分比。如果您使用body{height: 100%}它将不起作用，因为它的父级没有高度百分比。在这种情况下，为了工作该身体高度，您必须在html{height:100%}
在其他情况下，要摆脱您可以使用的定义父百分比
身体{高度：100vh}
vh代表视口高度
我认为它有帮助
| 归档时间： |
|
| 查看次数： |
213066 次 |
| 最近记录： |