Question

左红色div不会一直向下。我希望它一直向下，无论主（“li”）div有多高。

CSS

.li_wrap {
    padding:7px;
    float:left;
}
.song-list li{
    position: relative;
    display: block;
    padding:0;
    margin-bottom:10px;
    background: black;
    color: yellow;
    z-index:7;
    text-decoration: none;
}
.rank_pos {
    background:red;
    margin:0;
    padding:3px;
    height:100%;
    float:left;
}
body {font-size:12px; font-family:Verdana, serif;}

HTML

<ul class="song-list">
  <li id="1">
  <div class="rank_pos">1st</div>

  <div class="li_wrap">Testing</div>

  <div style="clear:both;"></div>
  </li>

  <li id="2">
  <div class="rank_pos">2nd</div>

  <div class="li_wrap">Testing</div>

  <div style="clear:both;"></div>
  </li>
</ul>

或者可能有更好的方法。

Answer 1

清理一点 - http://jsfiddle.net/gDByS/2/

HTML

  <li>
      <span>3rd</span>
      <div>Testing<br />Testing<br />Testing<br />Testing<br />Testing</div>
  </li>

CSS

.song-list li{
    position: relative;
    display: block;
    padding:0;
    margin-bottom:10px;
    background: black;
    color: yellow;
    z-index:7;
    text-decoration: none;
    overflow: hidden;
    line-height: 22px;
}

ul li span{
    background:red;
    margin:0;
    padding: 0 5px;
    height:100%;
    display: block;
    position: absolute;
}

ul li div {
    margin-left: 40px;
}

Answer 2

此页面可能会指导您正确的方向：

http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

Answer 3

您可以使用jQuery：http://jsfiddle.net/SF24t/

或者有一个技巧可以帮助一些案例：例如，如果你想让两个“盒子”由一个一直到底部的边框分开，你可以拥有用repeat-y

绘制背景图像的边框

浮动div不会给出全高度

3 个答案: