0

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

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

有没有办法在不使用 JS 的情况下在 CSS 中做到这一点？

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

更新：

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

如果您为您指定高度，.extend您将看到我想要实现的目标，但需要在没有指定高度的情况下完成。

4

3 回答 3

1

我猜你.wrapper正在占用 100% 的宽度或你的浏览器屏幕。.main或者.extend为你制造问题，这包含在 .container 中。所以这就是我在下面编辑的原因。如果我.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

}

编辑：根据您的编辑，如果您想在 .main 下面添加.extend，您的 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
}
于 2013-07-11T13:07:49.223 回答
1

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

于 2013-07-11T13:08:10.260 回答
1

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

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

演示

希望这可以帮助

于 2013-07-11T16:33:53.300 回答