Question

我正在尝试创建一个扩展到容器底部的div。布局由父容器中的两列组成。两列的宽度均为百分比，父容器和左列的高度根据左列中的幻灯片显示进行扩展。我希望右列的高度与左侧相匹配，所以我可以在底部放置一些东西。我尝试了很多不同的东西，但无济于事。这是页面：

http://whub30.webhostinghub.com/~scottl9/testindex2.html

html是

<div id="content_section">
    <div class="imgwrap">
      <div class="imgwrap2">
         Left-column content
      </div>
      <div class="playersection">
         Right-column content
      </div>
    </div>
<div class="clearall"></div>
</div>

，相应的CSS是

 #content_section { position:relative; min-height:400px; min-width:600px; max-height: 1000px; max-width:2000px;}
.imgwrap {position:relative; width:100%; height:auto; min-width:409px; min-height:230px; border-style:solid; border-width:medium; display: inline-block;}
.imgwrap2 {position:relative; float:left; width:70%; height:auto;}
.playersection {border-style:solid; width:30%; position: relative; float: right; border-width:medium;}
.clearall {clear:both;}`

（我添加了边框，所以我可以看到div。）任何帮助将不胜感激！

Answer 1

尝试将右栏的高度更改为100％。

.imgwrap2 {position:relative; float:left; width:70%; height:100%;}

使用可变高度和宽度展开div

1 个答案: