在高度不确定的div中扩展div高度

Question

我试图在没有固定高度的div中扩展div的高度。我必须在不使用position:absolute的情况下执行此操作，因为扩展的div需要与其他div交互。

扩展的div不能有固定的高度，它所在的div也不能…

有没有一种方法可以在CSS中做到这一点而不使用JS？

http://jsfiddle.net/q3Sze/2/

更新：

为了澄清，在这个例子中，我试图将.extenddiv的高度从.maindiv的顶部扩展到底部。.extend不应该有固定的高度，也不应该是absolute的位置，因为它需要推动它周围的元素。为了使事情更加复杂，div是用于流体站点的，所以除了.extenddiv之外的所有东西都必须具有100%的宽度。

如果你为.extend指定了一个高度，你会看到我试图实现的目标，但需要在没有指定高度的情况下完成。

Answer 1

实际上你可以做一个简单的破解，比如

.container {
    display:table-row;
}
.extended {
    display: table-cell;
    background: green;
    width: 150px;
}
.main {
    display:table-cell;
}

演示

希望这能帮助

Answer 2

我认为您正在尝试制作两个相同高度的列。看看这里的HTML/CSS：制作两个相同高度的浮动div以获得一些建议。此处对问题进行了解释http://alistapart.com/article/fauxcolumns

Answer 3

我猜你的.wrapper占用了100%的宽度或你的浏览器屏幕。而.main或.extend给你带来了问题，这包含在.contanger中。所以这就是我编辑下面的.container的原因。如果我让你的容器像下面的一样

.container{
     overflow:hidden;//very importantant to fulfill your criteria
     width:500px;//i gues you want have a fixed width of your container
     margin:3px;//if you want to
     word-break:break-all;//if you use fixed width for your container,because you are writing text with width 100% inside the container
}

编辑：根据您的编辑，如果您想在下面添加.extend.main，您的div将是

<div class="container">
    <div class="main"></dive>
     <div class="extended">&nbsp;</div>
</div>

现在你的css应该是：

.main {
   width: 100%;
   //doont use height it will take automatic height
}
.extended {
   background: green;
   width: 150px;
   float: left;
   height: 100%;
   margin-top:40px;//create distance from main here,its better option
}