列

Question

我正在构建一个有两个部分大小的网站。

尺寸为：

1. 全屏（高度：100％;）
2. 半屏（高度：50％;）

查看截图：

请注意有三列（绿色，粉红色，蓝色）的部分。

这在列col-md-4崩溃之前有效。

一旦柱子坍塌，它们会溢出容器（高度：50％），然后是50％高度（150％）的3列，额外的100％覆盖最后一部分（100％）。

如果容器溢出，我怎样才能获得扩展高度？

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #fff4fd;
}
.wrapper {
    height: 100%;
    width: 100%;
    position: relative;
}
.wrapper .content {
    height: 100%;
    width: 100%;
}

.home {
    background-color: red;
    background-attachment: fixed;
}
.what-we-do {
    background-color: blue;
}
.our-work {
    background-color: #93A8FF;
}
.our-ethos {
    background-color: yellow;
}
.case-studies .row {
    height: 100%;
    margin: 0;
}
.case-studies .row > div {
    height: 100%;
}
.case-studies .row > div.case-study-1 {
    background-color: #D1F3F0;
}
.case-studies .row > div.case-study-2 {
    background-color: #FFEBF1;
}
.case-studies .row > div.case-study-3 {
    background-color: #D7EEF9;
}
.page.page-full {
    height: 100%;
}
.page.page-half {
    height: 50%;
}
/*# sourceMappingURL=app.css.map */

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="bower_components/modernizr/modernizr.js"></script>
<div class="wrapper">
    <div class="content">
        <div class="page page-full home"></div>
        <div class="page page-half what-we-do"></div>
        <div class="page page-half our-work"></div>
        <div class="page page-half case-studies">
            <div class="row">
                <div class="col col-md-4 case-study-1"></div>
                <div class="col col-md-4 case-study-2"></div>
                <div class="col col-md-4 case-study-3"></div>
            </div>
            <div class="cleafix"></div>
        </div>
        <div class="cleafix"></div>
        <div class="page page-full our-ethos clearfix"></div>
    </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="bower_components/jquery/dist/jquery.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>

查看截图：