高度百分比HTML 5/CSS
高度百分比HTML 5/CSS
提问于 2009-10-26 04:50:26
我尝试在CSS中将<div>设置为某个百分比的高度，但它只是与其中的内容保持相同的大小。但是，当我删除HTML5的<!DOCTYTPE html>时，它可以正常工作，<div>会根据需要占据整个页面。我想让页面进行验证，那么我应该怎么做？
我在<div>上有这个CSS，它的ID是page
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}回答 5
Stack Overflow用户
发布于 2009-10-26 05:15:04
还需要设置<html>和<body>元素的高度；否则，它们的大小只能容纳内容。For example
<!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>
Stack Overflow用户
发布于 2013-06-18 06:46:05
博本斯的回答会让你知道在哪些情况下"height: XX%;“可以工作，或者不能工作。
如果你想创建一个具有设定比例的元素(高度:其自身宽度的%)，最好的方法是使用padding-bottom有效地设置高度。square示例：
<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
Stack Overflow用户
发布于 2016-10-26 14:58:16
您可以使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1622027
复制相关文章
相似问题