Question

我试图将页面划分为4个相等的部分（2x2网格）和固定的标题。到目前为止，我将它拆分为4但由于标题，页面大于100％。

我希望4部分只占用屏幕上的可用空间而不是使页面滚动但是相等。

HTML：

<header></header>

<div class="container">
    <div class="block blue"></div>
    <div class="block green"></div>
    <div class="block purple"></div>
    <div class="block red"></div>
</div>

CSS：

html, body {
height: 100%;
}

header {
    width: 100%;
    height: 117px;
     background-color: grey;
}

.container {
    width: 100%;
    height: 100%;
}

.block {
    width: 50%;
    height: 50%;
    float: left;
}

.blue {
    border-top: 4px solid blue; 
}  

.green {
    border-top: 4px solid green;
}

.purple {
    border-top: 4px solid purple;
}

.red {
    border-top: 4px solid red;
}

到目前为止看到演示：http://jsfiddle.net/Kas78/1/

我还希望能够使其响应，以便当页面小于690像素时，每个块可以更改为100％宽度和固定高度，因此需要牢记。

Answer 1

建议您将代码更改为：

http://jsfiddle.net/NicoO/Kas78/2/

html, body {
    height: 100%;
}

header {
    height: 117px;
    background-color: grey;
}

.container {
    height: calc(100% - 117px);
}

.block {
    width: 50%;
    height: 50%;
    float: left;
}

我抛弃了一些width:100%，因为默认情况下块元素将填充父元素。

使用固定标题将页面拆分为4个相等的部分

1 个答案: