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

使左右div都伸展到容器的整个高度（部分）。

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

Answer 3

我会设置部分div的高度，然后将children的高度设置为100%。

查看

Answer 4

使用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创建相同的最小高度，但如果内容增加，只允许一个div进一步扩展，那么您也可以使用min-height属性。

我还要补充一点，您应该为div使用更多语义名称。如果有一天你决定移动你的左栏，但它已经不在左边了，该怎么办？你必须重命名所有内容！

友情链接