1. 首页
  2. 问题列表
  3. HTML 5/CSS高度百分比
提问者：小点点

HTML 5/CSS高度百分比


我试图将

设置为CSS中的某个百分比高度，但它只是保持与其中内容相同的大小。 但是，当我删除HTML5时，它可以正常工作，
会按需要占用整个页面。 我想要验证页面，那么我应该怎么做呢？

我在

上有此CSS，其ID为page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

共3个答案

匿名用户

我试图在CSS中设置一个div到一定的百分比高度

什么百分比？

若要设置百分比高度，其父元素(*)必须具有显式高度。 这是相当不言而喻的，因为如果您将height保留为auto，块将获取其内容的高度。。。 但是，如果内容本身有一个高度，用父项的百分比来表示，那么你就让自己有点Catch 22了。 浏览器放弃了，只是使用内容高度。

因此div的父级必须具有显式的height属性。 虽然高度也可以是一个百分比，如果你想，这只是把问题上升到下一个层次。

如果要使div高度成为视口高度的百分比，则div的每个祖先（包括和）都必须具有height:100%，因此存在一个一直到div的显式百分比高度链。

(*:或者，如果定位了div，则是“containing block”，它是最接近的祖先，也要定位。）

或者，所有现代浏览器和IE>=9都支持相对于视口高度(VH)和视口宽度(VW)的新CSS单位:

div {
    height:100vh; 
}

有关更多信息，请参见此处。

匿名用户

您还需要设置和元素的高度； 否则，它们只会大到足以容纳内容。 例如:

null

<!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>

匿名用户

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-ratiation-for-video

相关问题