0

我有两个 div/列。一个向左浮动，另一个向右浮动（对于我正在制作的响应式设计页面，它必须是这种方式）。左 div 的内容远远低于视口/左 div，而右内容更短并且很好地保持在视口/右 div 内。

我需要背景颜色一直扩展到左侧 div 内容的底部（或者右侧 div 的内容，如果它是较长的内容）。

相反，它在视口底部切割背景颜色/ div。我尝试过 clears:both、clearfix 和溢出控件，但均无济于事。我想我没有为此设置正确实施它们。谁能编辑我的小提琴，向我展示我需要做什么才能让它们延伸到底部？

这是小提琴（您需要在小视口中向下滚动以查看它如何切断颜色）：

http://jsfiddle.net/4C89C/

这是我在小提琴中使用的代码：

<html><head></head><body><style>

html, body {height:100%;}
#content {
    height:100%;
    border:thin solid red;
}
#innerdiv {
    height:100%;
    float:left;
    background-color: #eee;
    width: 60%;
}
#innerdiv2 {
    height:100%;
    float:right;
    background-color: blue;
    width: 40%;
}
#textdiv {
    height: 100%;
    padding-left: 40px;
}
#textdiv2 {
    height: 100%;
    padding-left: 40px;
    colo: white;
}  
</style>




<div id="content">
    <div id="innerdiv">
        <div id="textdiv">

Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />

                </div>
    </div>

<div id="innerdiv2">
        <div id="textdiv2">

Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />
            </div>
      </div>    
</div>

</body></html>
4

1 回答 1

2

#content { height:100%; }不起作用，因为这个高度是指父元素的高度，而不是由#content内容“产生”的高度......这意味着#content只能达到<body>原来的高度，这又不是页面的整个高度，而是高度的“显示区域”。

在使用and插入另一个之后，不要为#contentand定义任何高度。#innerdiv2<div>height:0;clear:both;

应该做的伎俩，不要打扰你或任何人 :)

于 2013-12-06T01:00:28.303 回答