Две высоты divs 100% реагируют при уменьшении

Мне нужно два столбца divs 100% высоты, но реагировать на изменение размера страницы (см. Иллюстрацию ниже):

Как мне это сделать?

2 ответа

Вот пример: http://jsfiddle.net/f2Uce/

Основной частью является @media (max-width:640px)

Отрегулируйте ширину нижнего правого окна, чтобы увидеть изменение.


Вы можете достичь таких вещей, просто используя @media запросы:

<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/

licensed under cc by-sa 3.0 with attribution.