边框和等高的CSS列

Question

我有这样的代码

<div class="container">
  <div class="section">
    <div class="left">
      a profile pic and some text
    </div>
    <div class="right">
      a wider div with much more text and some bio info
  </div>
</div>

我想要两个div之间的虚线边框将左列与右列分开。 我的问题是，无论我将边框放在左列还是右列上，它都不会延伸到底部。 如果任一列比另一列短/长，则边框总是在到达底部的截止点之前停止。

Answer 1

尝试这个：

 html,body,.container, .section, .left, .right{height:100%}
  .left, .right {border:1px dotted black;float:left;}

示例： http ： //jsbin.com/agaza5

Answer 2

使用CSS为两个div列均等地设置height属性：

.left {
    border:1px solid #ccc;
    height:100px; /* you can use "100%" too, if you want */
}


.right {
    height:100px; /* you can use "100%" too, if you want */
}

如果要为两个div创建相同的最小高度，也可以使用min-height属性，但是如果内容增加，则只允许一个div进一步伸展。

我还要补充一点，您应该为div使用更多的语义名称。 如果有一天您决定将左列移到左边，该怎么办？ 您将不得不重命名所有内容！

Answer 3

使您的左右div都拉伸容器的整个高度（ section ）。

.left{ height:100%; }
.right{ height: 100%; }

Answer 4

我会设置你的高度section的div，然后只需设置孩子的高度，以100％。

看看这个