Question

也许我只是被捆绑并且忽略了一些非常简单的东西，但是看起来我的内部div并没有延伸到他们的父元素，即使我为孩子和父母都设置了height:100%。我正在使用bootstrap 3.这是我的代码：

CSS：

#testimonials {
    margin-top: 30px;
    height: 100%;
    text-align: justify;
}

#testimonials > div {
    border-right: 1px solid #e25400;
    height: 100%;
}

HTML

<div id="testimonials" class="row">
    <div class="col-md-4">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
    </div>
    <div class="col-md-4">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
    </div>
    <div class="col-md-4">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
    </div>
  </div>

编辑：

http://jsfiddle.net/d5JX7/1/它的响应式设计使您需要将其拉伸至1200px。我将第一列中的文字缩短，以显示较短的边框长度，我希望与其余部分对称

Answer 1

为了将高度设置为100％，html树中的某些元素必须具有固定高度，或者所有父元素必须设置为100％，包括html标记。

在您的情况下，如果您将#testimonials设置为height:300px，那么您的第二条规则应该有效。

或者，为#testimonials的父级设置高度。如果#testimonials的父级是body标记，请设置html, body{ height:100%; }

编辑：

在您发布的小提琴中，最新的解决方案是将#testimonials转换为表格，以便其单元格自动扩展到最大高度。

您只能使用CSS来保留标记。只需为display:table设置#testimonials;，为div设置display:table-cell;

Answer 2

html,body{height:100%;}

#testimonials {
    margin-top: 30px;
    height: 100%;
    text-align: justify;
    background-color:#ccc;
}

#testimonials > div {
    border-right: 1px solid #e25400;
    height: 100%;
}

http://jsfiddle.net/bipin_kumar/Kkg68/8/

即使父级设置为100％，内部div也不会延伸到外部div

2 个答案: