边框和等高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

Answer 2

使用CSS为两个divs列设置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