当减少时，两个div高度100％响应

Question

我需要一个100％高度的两列div，但响应页面大小调整（参见下图）：

我将如何做到这一点？

Answer 1

以下是一个示例：http://jsfiddle.net/f2Uce/

主要部分是@media (max-width:640px)

调整右下方框的宽度以查看更改。

Answer 2

您只需使用@media查询即可实现此类目标：

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
</div>

CSS：

.container {
    background-color: #000;
    width: 100%;
}

.one {
    background-color: #f00;
    display: inline-block;
    float: left;
    height: 50px;
    width: 50%;
}

.two {
    background-color: #00f;
    display: inline-block;
    float: right;
    height: 50px;
    width: 50%;
}

@media screen and (max-width: 500px) {
    .content1,
    .content2 {
        display: block;
        width: 100%;
    }
}

http://jsfiddle.net/e7jRm/1/