Question

给出以下HTML：

<div class='page-header'>
    <h1>Header</h1>
    <div class="thingy">
    </div>
</div>

以下CSS：

.page-header {
    background-color: blue;
    border: 5px solid green;
}

h1 {
    background-color: red;
    display: inline-block;
}

.thingy {
    float: right;
    height: 100%;
    width: 20px;
    background-color: yellow;
}

为什么div class='thingy'不可见？

Rendering of the above HTML. Yellow box is not visible.

View in JSFiddle

将高度更改为固定值会使其可见，但这不是我想要的。我希望元素的高度随着它所在元素的高度而缩放。我该怎么做？

Answer 1

因为你没有给父元素赋予高度

试试这个

.page-header {
    background-color: blue;
    border: 5px solid green;
    height:60px;
}

Js Fiddle Demo

Answer 2

这是因为父容器没有设置任何高度。如果您为.page-header设置任何固定高度（例如，以px为单位），那么.thingy也将具有此高度。

例如：

.page-header {
    background-color: blue;
    border: 5px solid green;
    height: 100px;
}

http://jsfiddle.net/r9Zx6/2/

修改

如果您希望它自动调整并始终适合父母身高的100％，您可以尝试＆＃34; hack＆＃34;像这样：

首先设置巨大的垂直填充和相同但负边距：

.thingy { float: right; height: 100%; width: 20px; background-color: yellow; padding: 1000px 0; margin: -1000px 0; }

然后将overflow:hidden设置为parent：

.page-header { background-color: blue; border: 5px solid green; overflow: hidden; }

http://jsfiddle.net/r9Zx6/5/

应该在这种情况下工作，但这也取决于你最终想要达到的目标。

另一种方法是使用javascript，但我认为让JS参与这些美容问题是一个好主意。

Answer 3

正如我的评论中所述，这是因为该元素的父母都没有声明的身高。为什么这么重要？因为这就是它的工作方式。

MDN：

百分比是根据高度来计算的生成的框包含块。 如果含有的高度未明确指定块（即，它取决于内容高度），这个元素并不是绝对定位的值计算到自动。根元素的百分比高度是相对的到最初的包含块。

Answer 4

不确定我会得到的反应，但作为一种可能的解决方案。

如果您将页眉设置为

position:relative

然后将thingy类设置为

position:absolute;
right:0px;
top:0px;

你不再需要浮动：右边，它与父亲的身高相同。

here is a fiddle

Answer 5

height: 100%;表示孩子的确切高度不是父母的高度，因此在该上下文中使用它是没有意义的，因为高度自动为100％，遗憾的是没有高度，因此容器未显示。

Answer 6

这是另一种选择，虽然它需要jQuery：

$(function() { $('.thingy').height($('.thingy').parent().height()); });

Answer 7

我认为这可能是你想要实现的目标。 “header”元素增长以容纳它包含的元素（我在“thingy”上放置了一个最小高度，以显示在浏览器中查看时的位置）。

<html>
  <head>
  <style>
    .header {background-color: blue; border: 5px solid green; height: auto; overflow: hidden;}
    .thingy {float: right; height: auto; min-height: 100px; width: 20px; background-color: yellow;}
    h1 {background-color: red; display: inline-block;}
    </style>
  </head>
  <body>
  <div class="header">
        <h1>
      header
      </h1>
    <div class="thingy"></div>
  </div>
  </body>
</html>

为什么在这种情况下100％高度= 0px？

7 个答案: