Question

我使用简单的Bootstrap-Grid：一行，两行col-md-6 - 列。我在每个列中都有一个容器class="box"，它应该使用height of 100%。

我尝试了不同的方式，例如模拟表和表cols，但选择了Bootstrap推荐的.row-eq-height - 类。

强迫box col-md-6伸展到全高的常用方法是什么？

HTML：

<div class="row row-eq-height">
    <div class="col-md-6">
        <div class="box" style="background: red">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.            
        </div>
    </div>
    <div class="col-md-6">
        <div class="box" style="background: green">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        </div>
    </div>
</div>

CSS：

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.col-md-6 {
  background: yellow; /* to show the left space */
}

.box {
  height: 100%;
}

住：

http://jsfiddle.net/cmbe4h1h/

编辑：我想避免使用其他容器包装HTML（比如许多position: relative/absolute - 教程）。

提前致谢！

Answer 1

我没有为我的案例找到合适的CSS解决方案并切换到

JS（ jQuery ）：

$('.sameHeightWrapper').each(function() {
    var highestContainer = 0;
    $('.sameHeightContainer', this).each(function() {
        if($(this).height() > highestContainer) {
            highestContainer = $(this).height();
        }
    });
    $('.sameHeightContainer', this).height(highestContainer);
});

<强> HTML ：

<div class="sameHeightWrapper">
    <div class="sameHeightContainer c1">
        Container 1<br/>
        ...
    </div>
    <div class="sameHeightContainer c2">
        Container 2<br/>
        ...
    </div>   
    <div class="sameHeightContainer c3">
        Container 3<br/>
        Container 3<br/>
        ...
    </div>   
</div>

试一试：jsfiddle.net

Answer 2

CSS solution。删除了#create-cat { margin-top: 1em; } #create-cat.hidden { display: none; } .category{ margin-top: 1em; } .category input[type=button] { background-color: lightblue; border-style: solid; border-color: gray; border-width: 1px; border-radius: 5px; } .category input[type=button]:hover { background-color: blue; color: white; border-color: black; } .category input[type=button]:active { background-color: black; color: white; border-color: black; }类上的填充。还将您的bg内联样式移动到外部容器，而不是<template id="adding-template"> <div class="category"> <input type="button" /> </div> </template> <input type="button" onclick="addInput()" value="Add Category"> <div id="response"></div> <div id="create-cat" class="hidden"> <input type="text" placeholder="type here" /> <input type="button" onclick="addlinking()" value="Add"/> </div>类。

CSS / Bootstrap：如何在cols全高度内拉伸容器？

2 个答案: