Как установить высоту вложенного элемента внутри плавающего элемента относительно высоты окна?

Question

Я пытаюсь построить простой макет, который я получил на изображении ниже.(1), (2) и (3) - обязательные панели содержимого - (4) Я не уверен, что мне нужно для позиционирования.

Моя главная проблема заключается в том, что высота (1) должна быть установлена ​​относительно 75% высоты окна (окна просмотра).Ниже я хочу добавить контент отдельно, который может иметь переменную высоту.А справа я хочу один независимый столбец содержимого с переменной высотой.

Я думаю, мне нужно поместить (1) и (2) в (4), чтобы они плавали вместе слева от (3) правильно.Но если я сделаю это, я не смогу установить высоту (1) равной 75%, потому что теперь она относительно (4), которая как поплавок имеет нулевую высоту.Но если затем установить (4) на 100% высоты окна, это приведет к проблемам при увеличении содержимого в (3).

Что мне не хватает?

Ps.Важно, чтобы (1) имела высоту жидкости и всегда составляла 75% от текущей высоты области просмотра - в противном случае я мог бы установить ее через JavaScript при загрузке.Я мог бы технически расширить это для процедурного изменения размера окна при каждом изменении высоты окна, но для этого должен быть более элегантный CSS-способ.

Answer 1

Чистое решение CSS требует, чтобы вокруг левой грани (4) не было границы, потому что нам нужно задать height:100%, но разрешить overflow:visible, чтобы (2) нижняя левая панель не была обрезана выкл.

html, body {
    height: 100%;
}
#cont1, #cont2 {
    width: 45%;  /* or something less than 50% */
    float: left;   
}
#cont1 {
    height: 100%;
    overflow: visible;
}
#sub1 {
    height: 75%;
}​

http://jsfiddle.net/tMUMj/3/

Тем не менее, использование JavaScript для изменения размера левой верхней панели не так элегантно, как вы думаете. Использование jQuery:

$(document).ready(function() {
    $(window).trigger('resize');
});
$(window).on('resize',function() {
    $('div#lefttoppane').height( 0.75 * $(window).height() );
});

http://jsfiddle.net/tMUMj/

Теперь само вычисление ограничено одной строкой кода плюс два обработчика событий, один из которых вызывает другой.

Answer 2

Я думаю, это то, что вы имеете в виду:

<div class="pane4">
    <div class="pane1">ONE</div>
    <div class="pane2"TWO></div>        
</div>

<div class="pane3">THREE</div>
<div class="clear"></div>

CSS:

body, html { height:100% }

.pane4 {
    width:200px;
    float:left;
    height:100%;
    border:1px solid #ff0000   
}

.pane1 {
    height:75%;
    border:1px solid #00cccc   
}

.pane2 {
    border:1px solid #ff0000    
    min-height:50px;
}
.pane3 {
    float:left;
    width:200px;   
    border:1px solid #cc00cc
}


.clear { clear:both }

Answer 3

Вы можете использовать только float в правом контейнере и установить ширину левого, скажем, (50%).Если ваш правый контейнер занимает 50% общего количества (включая границы, отступы и поля), он будет плавать справа от него.