1

所有内容都是动态的。

#block {
    width: 500px;
    background-color:#fff000;
    border: thin solid #999;
 
}
#col1{
    width: 300px;
    background-color:#ffffff;
    float:left;
    height:auto; 
    overflow: auto;
}

#col2{
    width: 180px;
    background-color:#ffaaff;
    float:right;
}
.clear {
    clear: both
}
<div id="block">
    <div id="col1">

      white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white 

    </div>
      
      <div id="col2">
        pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink 

      </div>
    <div class="clear"></div>  
</div>

我希望白色柱垂直拉伸以匹配粉色柱的高度（到达底部黄色边框）。我不喜欢使用绝对或相对显示。

这是 和 的解决display:relative方案display:absolute。它有效，但在更复杂的结构中给我带来了其他问题。

#block {
    width: 500px;
    background-color:#fff000;
    border: thin solid #999;
    position:relative;
}
#col1{
    width: 300px;
    background-color:#ffffff;
    float:left;
    height:100%; 
    overflow: auto;
    position:absolute;
}

#col2{
    width: 180px;
    background-color:#ffaaff;
    float:right;
}
.clear {
    clear: both
}
<div id="block">
    <div id="col1">

      white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white 

    </div>
      
      <div id="col2">
        pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink 

      </div>
    <div class="clear"></div>  
</div>

4

3 回答 3

1

您不想使用绝对/相对？你想用什么？

这是仅修复 CSS，否则为背景图片 http://unnaturalcode.blogspot.com/2012/08/css-recipe-for-making-elements-fill.html

于 2012-09-14T23:54:47.450 回答
0

看到这个：

html, body { height: 100% }

#block {
    width: 500px;
    background-color:#fff000;
    border: thin solid #999;
    height: 100%;
}
#col1{
    width: 300px;
    background-color:#ffffff;
    float:left;
    height:100%; 
    overflow: auto;
}

#col2{
    width: 180px;
    background-color:#ffaaff;
    float:right;
}
.clear {
    clear: none
}
<div id="block">
    <div id="col1">

      white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white white 

    </div>
      
      <div id="col2">
        pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink pink 

      </div>
    <div class="clear"></div>  
</div>
html, body { height: 100% }

#block {
    width: 500px;
    background-color:#fff000;
    border: thin solid #999;
    height: 100%;
}
#col1{
    width: 300px;
    background-color:#ffffff;
    float:left;
    height:100%; 
    overflow: auto;
}

#col2{
    width: 180px;
    background-color:#ffaaff;
    float:right;
}
.clear {
    clear: none
}

（我改变了你的清晰 DIV 并添加height: 100%到周围的元素。）

于 2012-09-14T23:57:19.777 回答
0

将要拉伸的元素及其所有父容器设置为height:100%;.

例如，

#element_to_be_stretched, html, body {height: 100%}
于 2013-04-21T17:45:51.847 回答