CSS –为什么百分比身高不起作用？
为什么百分比值height不起作用，但是百分比值却起作用width呢？
<div id="working"></div>
<div id="not-working"></div>
#working{
width:80%;
height:140px;
background:orange;
}
#not-working{
width:80%;
height:30%;
background:green;
}
#working端部的宽度为视口的80％，但#not-working端部的高度为0。
问题答案：
块元素的高度默认为块内容的高度。因此，给定这样的东西：
<div id="outer">
<div id="inner">
<p>Where is pancakes house?</p>
</div>
</div>
#inner将生长到足以容纳段落的高度，并且#outer将生长到足以容纳段落的高度#inner。
当您将高度或宽度指定为百分比时，这是相对于元素父级的百分比。对于宽度，除非另有说明，否则所有块元素的宽度一直与其父元素一样，一直到<html>；因此，块元素的宽度与它的内容无关，也就是说，它width: 50%产生了定义良好的像素数。
但是，除非您指定特定的高度，否则块元素的高度 取决于其内容 。因此，在涉及高度的父级和子级之间会有反馈，并且height: 50%除非您通过给父元素指定特定的高度来打破反馈循环，否则不会产生明确定义的值。
-
问题内容： 我正在尝试使用带有百分比的height属性，但是它不起作用。我想使用百分比，因此在任何分辨率下看起来都不错。 我该如何运作？ 问题答案： 当您使用宽度或高度时，您应该问的第一个问题是什么？因此，您还需要对父元素应用高度，因此，假设您的父元素位于body标签内，则需要在CSS中使用此元素 所以，现在你的元素是的 注意：另外，当您处理定位的元素时，您可能会遇到一种情况，即您的高度不会超过当
-
问题内容： 我有两个div，高度为90％，但显示方式有所不同。 我试图在它们周围放一个外部div，但这没有帮助。另外，在Firefox，Chrome，Opera和Safari上也是如此。 有人可以解释为什么我遇到这个问题吗？ 下面是我的代码： 问题答案： 使用（视口高度）代替百分比。它将获取浏览器的高度并相应地调整其大小，例如 试试这个代码 与CSS
-
问题内容： 我有两个div，高度为90％，但显示方式有所不同。 我试图在它们周围放一个外部div，但这没有帮助。此外，在Firefox，Chrome，Opera和Safari上也是如此。 有人可以解释为什么我遇到这个问题吗？ 下面是我的代码： 问题答案： 使用（视口高度）代替百分比。它将获取浏览器的高度并相应地调整其大小，例如 试试这个代码 与CSS
-
问题内容： 我试图在CSS 中将a设置为一定的百分比高度，但它的大小与其中的内容相同。但是，当我删除HTML 5 时，它可以工作，并按需要占用整个页面。我希望页面进行验证，那我该怎么办？ 我在上有此CSS ，其ID为： 问题答案： 我正在尝试在CSS中将div设置为某个百分比高度 百分比是多少？ 要设置百分比高度，其父元素（*）必须具有明确的高度。这是不言而喻的，如果您将height保留为，则该块
-
问题内容： 我使用占用所有可用空间的第三方组件，即width=100%和height=100%。我没有控制权。 我正在尝试使其适合以下布局，但是它height=100%不起作用（我希望第三方组件占据所有绿色空间）。 为什么？您将如何解决？ 问题答案： 通常，对于使用percent on height来获取其父代的高度的元素，父代需要的高度不是auto或定位为绝对高度，否则height将计算为aut
-
问题内容： 这个问题已经在这里有了答案 ： 高度百分比HTML 5 / CSS （6个答案） 3年前关闭。 我有以下简单的代码： 但是div不会以高度为100％显示。为什么？ 问题答案： 您需要在所有父元素上设置100％的高度，在这种情况下，您的正文和html都应设置为100％。这个小提琴显示它正常工作。