Question

正如标题所说，我需要两个div同样高。它们应该尽可能高，以满足内容的需要。目前的CSS是：

.portfolioleft{
    float:left;
    width:189px;
    background-color: #436FAC;
    min-height: 100px;
    height: auto;
    color: #FFF;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.portfolioleft img{
    border-radius: 10px;
}
.portfolioright{
    float:right;
    width:500px;
    background-color: #436FAC;
    min-height: 100px;
    height: auto;
    color: #FFF;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.portfolioright a{
    color:#FFFFFF;
}

和div的html是：

<div class="portfolioleft"><img src="img" alt="img" width="189" height="311" /></div>
<div class="portfolioright">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="clear">&nbsp;</div>

Answer 1

单靠CSS无法解决这个问题（除非您想要一个可以使用图像的黑客解决方案）。您需要实现JS解决方案。由于内容是动态的，并且您不知道列的高度，因此您需要访问DOM以确定最高列的高度，然后应用于指示的列。我定期使用以下内容，它运行良好，易于实现。

http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html

Answer 2

不幸的是，这在CSS中是一个棘手的问题。如果您只想将左侧边栏的背景颜色扩展到该部分的底部（其高度由右侧div定义），请尝试将它们包装在父div（缩放到右侧div的高度）内，然后将左侧div放置在位置：绝对位置和高度100％，如下所示：

<div class="portfolio">
  <div class="portfolioleft">...</div>
  <div class="portfolioright">...</div>
</div>

.portfolio {
  position: relative;
  background: white;
}

.portfolio .portfolioleft {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background: #436FAC;
}

.portfolio .portfolioright {
  margin-left: 200px;
}

如果两个方面都是动态的并且您需要两个高度来匹配，那么使其在所有主要浏览器中运行的唯一可靠方法是使用具有两列的基于表的布局，因为它可能是非常糟糕的。 / p>

Answer 3

右侧div中的

单元格属性

我检查了你的代码并将浮动替换为display table-cell

您可以查看此直播http://jsfiddle.net/rohitazad/prMLh/1/

两个动态高度相同的div

3 个答案: