Question

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

扩展div不能有固定的高度，而且div也不能......

有没有办法在不使用JS的情况下在CSS中执行此操作？

更新：

为了澄清，在这个例子中，我试图将.extend div的高度从.main div的顶部扩展到底部。 .extend不应该有固定的高度，也不应该是absolute的位置，因为它需要推送围绕它的元素。为了使事情更复杂，div是一个流动的网站，所以除了.extend div之外的所有内容都必须有100％的宽度。

如果您指定.extend的高度，您将看到我正在尝试实现的目标，但需要在没有指定高度的情况下执行此操作。

Answer 1

我猜您的.wrapper占据了100％的宽度或您的浏览器屏幕。.main或.extend为您创建了问题，并且包含在.container.so中这就是我编辑的原因.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 }如果我们像下面那样制作你的容器

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

编辑根据您的编辑，如果您想在下面添加。扩展。您的div将是

.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
}

现在你的css应该是：

{{1}}

Answer 2

我认为您正在尝试制作两个相同高度的列。看看这里HTML/CSS: Making two floating divs the same height的一些建议。这里解释了这个问题http://alistapart.com/article/fauxcolumns

Answer 3

实际上你可以做一个简单的黑客攻击，

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

DEMO

希望这有帮助

在不确定高度的div内延伸div高度

3 个答案: