1

我试图使 DIV 中的第二列在它旁边的列变得更高时变得更高。

为了尝试“消毒”我正在尝试做的事情，我创建了以下 HTML 与 DIV 标签中的样式。

<body style = "width: 100%;">
    <div style = "position: relative; display: inline-block; width: 100%;">
        <div style = "display: inline-block; width: 700px; 
                     background-color: #ff0000; float: left;">
    line
     <br/>
    line
    <br/>
    line
    <br/>
    line
    <br/>
    line
        </div>
        <div style = "width: 300px; height: 100%; 
                      background-color: #000; float: left; color: #fff;">
    line
        </div>
    </div>
</body>

（在此消息中，我似乎无法正确格式化几个结束标签。）

在我的项目中，红色框可以改变高度，因为页面加载后里面的数据会增长和缩小。所以我用 display: inline-block 设置了它。

当您显示它时，它将显示一个从上到下填充该区域的红色区域。并且有一个黑色的一面，只有一条线。

我怎样才能让黑边走到底部并随着红柱收缩和增长？我需要将黑框延伸到与红框相同的高度。

4

2 回答 2

0

这可能会有所帮助：

http://css-tricks.com/fluid-width-equal-height-columns/

具有堆叠 div 的相等列高的纯 CSS 解决方案

于 2013-10-17T10:10:48.423 回答
0

您可以使用 jQuery 找到最大的 div/元素并将其他的设置为相同的大小，这是一种动态解决方案，以防第一个 div 变大，jQuery 将始终将它们设置为相同的高度。

var maxH = 0;
$('div.column').each(function() {
  maxH = Math.max(maxmaxH, $(this).height());
}).height(maxH);
于 2013-10-17T09:33:11.027 回答