2

见css：http: //jsfiddle.net/4JgA4/114/

也在这里：

<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%？

4

8 回答 8

3 
<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>
  • 原因是您没有为第一个 .
  • 还有一件事，你已经为第一个高度设置了准确的高度，你只需要为内部标签设置 height = 100%。

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

于 2013-09-23T09:59:08.667 回答
2

它没有得到完整的高度，因为原始容器没有高度。所以 100% 的虚无仍然是虚无。

如果给父 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>
于 2013-09-23T09:32:43.283 回答
2

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

于 2013-09-23T09:34:39.133 回答
2

如其他答案所述，除非还指定了父高度，否则 100% 不起作用。

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

注意这个造型是多么干净。没有浮动元素，也不需要在不同的元素中一次又一次地指定相同的高度。

看看这个小提琴

最佳实践：将样式与标记分开。

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*/
}
于 2013-09-23T10:15:55.203 回答
1

它没有得到高度，因为父 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>
于 2013-09-23T09:37:37.883 回答
0

尝试为父 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>

看这里

于 2013-09-23T09:37:49.633 回答
0

如果要设置任何元素的 100% 高度，则还必须将 100% 设置为其父元素。这是关于如何使用工作示例进行的很好的解释 - http://www.tutorialrepublic.com/faq/how-to-set-a-div-height-to-100-percent-using-css.php

于 2013-09-23T09:44:53.523 回答
-1

The example below illustrates how to assign 100% height or width to a div contained inside other divs

HTML Code: 

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

CSS Code: 

html,body{height:100%;}

.container {
     height:100%;
}

.fill{
   width:100%;
   height:100%;
   min-height:100%;
   background-color:#990000;
   padding:10px;
   color:#efefef;
}
于 2014-03-04T20:28:39.507 回答