Как сделать высоту двух рядов на 100%?

Question

Я хочу создать веб-сайт, который визуализирует данные. Страница должна изменить размер в соответствии с размером экрана (БЕЗОПАСНАЯ мобильная оптимизация, только разные размеры экрана ноутбука/ПК), и все должно быть видимым без прокрутки (исключение: полоски прокрутки разрешены внутри контейнеров). Он должен выглядеть следующим образом:

С большим количеством прибегая к помощи и пытается, я пришел далеко:

I didn't post any code in here, because it would become not 
readable in this post. But I pasted the code into jsfiddle 
where you can see my current state: 

http://jsfiddle.net/casaout/239DX/1/

К сожалению, я до сих пор есть некоторые проблемы:

• В правой колонке визуализация Высота рамки «визуализации» должна быть динамической (вероятно, фиксированная минимальная высота). Два кадра «узловые детали» и «лог» должны оставаться на высоте 300 пикселей и получать полосу прокрутки , если они получат больше. К сожалению, обе эти «желания» в настоящее время не работают.
• В левой колонке пять контейнеров должны изменить размер (все вместе должны быть на 100% выше). Я пробовал несколько вещей (например, min-height, percentages и т. Д.), Но не мог заставить его работать.

Что я делаю неправильно? - Большое вам спасибо за помощь!

Answer 1

Что касается фиксированной высоты и полосы прокрутки, то здесь решение:

http://jsfiddle.net/ftkbL/1/

CSS

.FixedHeightContainer 
{ 
    float:right; 
    height: 250px; 
    width:250px; 
    padding:3px; 
    background:#f00; 
} 
.Content 
{ 
    height:224px; 
    overflow:auto; 
    background:#fff; 
} 

HTML

<div class="FixedHeightContainer"> 
    <h2>Title</h2> 
    <div class="Content"> 
    // lot of text 
    </div> 
</div> 

Answer 2

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

Используйте .outerHeight(), чтобы получить высоту окна, $(window).outerHeight. Когда у вас есть высота, с которой вы работаете, вы можете присвоить высоту (отношение) к блокам внутри нее.

И если пользователь изменяет размер окна после загрузки страницы, вы можете обнаружить, что с $(window).on('resize', function() { ... });

ли это помощь или вы нуждаетесь во мне, чтобы работать с вашим примером?