javascript - Bootstrap/Css - 2 DIV 相同高度

Question

我有 HTML+CSS 代码。我需要第一个 div(第 1 行，白色)占据容器高度的前半部分，第二个 div(第 2 行，橙色)占据第二部分。这是我的 html: http://pastebin.com/ipiEKHBZ和我的CSS: http://pastebin.com/jtxw695F

Answer 1

修改后的答案:在意识到默认方法不适用于您的 HTML 后，这应该可行。您分别有 .content-row-1 和 2 类。您可以使用它们来告诉相应的行始终使用高度的特定部分。为此，您还需要手动修复定位。 (如果这可以更优雅地完成，请有人纠正我)例如，这些类可能看起来像:

    .content-row-1 {
       background: #eee;
       position: absolute;
       top: 10%;
       display: block;
       height: 40%;  
       width: 100%;
    }

我注意到您的页脚已经占据了高度的 10%，并且假设您不希望有任何重叠或间隙。为此，您还应该为标题指定一个高度百分比(在我的示例中为 10% 以保持简单)。

对于 future :尝试使用 https://jsfiddle.net/在显示您的代码示例时。我把它放在一起 https://jsfiddle.net/kvbyk3f1/ .