23

可能重复：
百分比高度 HTML 5/CSS

这需要是一个简单的，但我为什么以百分比为 div 指定的高度不适用于它。

例如：

<div class="container">
  adsf
</div>

CSS：

.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

当我将高度从 % 更改为 px 时，它工作得很好。% 与 px 一样有效，但为什么只有 px 有效而 % 无效。这是jsfiddle

编辑 虽然我在原始问题中错过了 50% 之后的分号，但这完全破坏了它。事实上，我想问的是，为什么 50% 不能让它消耗 50% 的容器。它仅从内容中获取高度，而不是从其容器中获取 50%。

4

3 回答 3

70

不需要整个页面的 50% 是因为“整个页面”只是你的内容有多高。将封闭的html和更改body为100%高度，它将起作用。

html, body{
    height: 100%;
}
div{
    height: 50%;
}

http://jsfiddle.net/DerekL/5YukJ/1/

在此处输入图像描述

^ 您的文档只有 20 像素高。20px 的 50% 是 10px，这不是你所期望的。

在此处输入图像描述

^ 现在如果将文档的高度更改为整个页面的高度（150px），150px 的 50% 是 75px，那么它将起作用。

于 2013-01-27T08:03:08.107 回答
3

你也需要给 thebody和htmla 高度。否则，body 只会和它的内容一样高（单个 div），其中 50% 将是这个 div 高度的一半。

更新小提琴：http: //jsfiddle.net/j8bsS/5/

于 2013-01-27T08:02:32.737 回答
1

“50%”后有分号缺失 (;)

但您还应该注意到，您的 div 的百分比与包含它的 div 相关联。

例如：

<div id="wrapper">
  <div class="container">
   adsf
  </div>
</div>

#wrapper {
  height:100px;
}
.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

这里你的 .container 的高度是 50px。它将是包装器 div 的 100px 的 50%。

如果你有：

广告 

#wrapper {
  height:400px;
}
.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

那么你的 .container 将是 200px。包装纸的 50%。

所以你可能想看看“包装”你的“.container”的div...

于 2013-01-27T08:09:27.607 回答