怎样让子元素高度撑满父元素高度?

Question

.row{
    display: block;
    font-size: 0;
}
.col{
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}

<div class="row">
    <div class="col">
        main
    </div>
    <div class="col" style="width:0;height:100%;border-right:solid 1px grey;"></div>
    <div class="col">
        sidebar
    </div>
</div>

我想在main和sidebar之间添加1px的分割线，并且高度是父元素的100%(main和sidebar高度较大的那个)，但是设置height:100%;好像不行，不知道怎样才行呢？

Answer 1

那是因为row 是没有高度的 。你在row设置一个 overflow:hidden 就好

Answer 2

因为父元素没有设置高的话.子是无法得知的.100%就没用. 你这样完全就是加一条边框就行了

Answer 3

首先不要为了加个分隔线，就增加无意义的标签。可以使用 css3 选择器、伪元素等。

例如

.col:first-child:after {
  content: '';
  display: block;
  width: 0;
  height: 100%;
  border: solid 1px grey;
}

其次，这种 row col 的方式不指定高度的，经常两个挨着的 col 高度不一样，

因此分割线没有意义，要不然固定他们的高度，要不然用别的方式。

row col 更多的是用来布局的，你这里的需求我觉得用 ul li 就行了。

Answer 4

在父元素写几个绝对定位的span，高度100%，宽度1px,模拟为1px的边框，亲测可用！

Answer 5

我是用height：auto；成功的······