Question

同样在这里：

<div style="min-height:40px; border:solid 1px black; float:left;">
      <div style="border:solid 1px black; height:150px; float:left;">
       First to set height
      </div>

       <div style="border:solid 1px red; height:100%; float:left;">
      Why don't get the 100%
    </div>
</div>

为什么第二个div没有得到100％？

Answer 1

<div style="min-height:40px; height:150px; border:solid 1px black; float:left;">
    <div style="border:solid 1px black; height:100%; float:left;">
    Your text 1
    </div>

    <div style="border:solid 1px red; height:100%; float:left;">
    Your text 2
    </div>
</div>

原因是你没有为第一个确切的高度（150px）。
还有一件事，你已经为第一个高度设置了精确的高度，内部标签只需要高度= 100％。

结果如下：http://jsfiddle.net/4JgA4/117/

Answer 2

它没有达到全高，因为原始容器没有高度。所以百分之百的东西仍然没有。

如果给父div一个高度，那么100％将生效。

如下所示：http://jsfiddle.net/4JgA4/115/

<div style="min-height:40px; border:solid 1px black; float:left; height:150px;">
    <div style="border:solid 1px black; height:150px;  float:left;">
    First to set height
    </div>

    <div style="border:solid 1px red; height:100%; float:left;">
    Why don't get the 100%
    </div>
</div>

Answer 3

因为您的父div没有height与height :100%的属性，您应该在父元素上有height:specific height，但是您有min-height，如果高度是动态的，那么应该使用jQuery来做到这一点

Answer 4

如其他答案所述，除非同时指定父高，否则100％不起作用。

看起来您正在尝试实现“相等的列高”，您不必为此设置父高度。使用CSS表格布局在这里很有帮助。

注意这款造型有多干净。没有浮动元素，也不需要在不同的元素中反复指定相同的高度。

查看此Fiddle

最佳做法：将样式与标记分开。

<强> HTML：

<div id="Parent">
      <div>
       First to set height
      </div>
      <div>
      Why don't get the 100%
    </div>
</div>

<强> CSS：

#Parent
{
    display: table;
}
#Parent > div
{
    display: table-cell;
    border: 1px solid black;
}
#Parent > div:first-child /*if you want to fixed the first column height*/
{
    height: 150px; /*or any other fixed height you want*/
}

Answer 5

它没有得到高度，因为父div没有高度。使用下面的代码

<div style="height:150px; border:solid 1px black; float:left;">
    <div style="border:solid 1px black;height:100%;  float:left;">
    First to set height
    </div>

    <div style="border:solid 1px red; height:100%; float:left;">
    Why don't get the 100%
    </div>
</div>

Answer 6

尝试向父div提供300px的高度并按预期查看结果

<div style="min-height:40px; height:300px; border:solid 1px black; float:left;">
        <div style="border:solid 1px black; height:150px; float:left;">
        First to set height
        </div>

        <div style="border:solid 1px red; height:100%; float:left;">
        Why don't get the 100%
        </div>
    </div>

See here

Answer 7

如果要设置任何元素的100％高度，则必须将100％设置为其父元素。以下是有关如何使用工作示例 - http://www.tutorialrepublic.com/faq/how-to-set-a-div-height-to-100-percent-using-css.php

的详细说明

Answer 8

下面的示例说明了如何为其他div中包含的div指定100％的高度或宽度

HTML代码：

<div class="container">
<div class="span5 fill">
Hello World
</div>
</div>

CSS代码：

html,body{height:100%;}

.container {
     height:100%;
}

.fill{
   width:100%;
   height:100%;
   min-height:100%;
   background-color:#990000;
   padding:10px;
   color:#efefef;
}

高度100％不起作用，div内有两个div

8 个答案: