Css вертикальный div заполняется, но не переполняется?

Question

<div id="main" style="overflow:hidden;height:80%;> 
    <div id="header"> 
    </div> 
    <div id="content" style="overflow:hidden;"> 
    </div> 
</div> 

У меня есть два div в главном div, и я хочу, чтобы содержимое div заполнило оставшуюся часть основного div, но если материал заполняет содержимое div за его заполненную высоту, я не хочу, чтобы содержимое div будет расти выше.

Я видел некоторые другие проблемы с stackoverflow, подобные этому, но ни один из ответов не работал для меня. Пробовал: Make DIV fill remainder of page vertically?, Get CSS Div to fill available height и How to make a DIV fill the remaining vertical space of the browser window?

Я думаю, что основное отличие состоит в том, что мне требуется, чтобы содержимое div заполнилось, но ТАКЖЕ не переполнено. Возможно ли это только с помощью CSS?

Обновление: Я продолжал проверять различные фрагменты кода, и это то, что я хочу: http://jsfiddle.net/zXnnp/. Но по какой-то причине я не смог воспроизвести его на своем локальном хосте. И потом я узнал, что это было потому, что я использовал http://jamesflorentino.github.io/nanoScrollerJS/ И по какой-то причине class = "nano" в содержимом div перепутал вещи. Все еще исследуя, что случилось.

Обновление2: класс = "nano" имеет высоту: 100%; поэтому я просто переопределяю его высотой: auto; и теперь все в порядке. Спасибо за помощь!

Answer 1

Вы могли бы сделать что-то вроде этого:

/* stretch the body to full height */ 
body, html { 
    height: 100%; 
} 

/* stretching the containers */ 
#header { 
    height: 50px; /* just a random number i chose, not sure what you wanted here */ 
} 
#content { 
    height: 100%; 
    margin-bottom: -50px; /* same as the header height, but negative */ 
} 

Вы можете увидеть код в действии здесь: http://jsfiddle.net/mRK24/

m agic лежит в первом растяжении вашего тела до высоты видового экрана. Затем #main станет 80% высоты видового экрана. Затем вы даете заголовку некоторую фиксированную высоту и содержимое, которое вы устанавливаете на высоту 100%, с нижним отрицательным краем, которое совпадает с высотой заголовка.

Обратите внимание, что часть вашего контента будет потеряна из-за overflow:hidden;. Странно, потому что вы не можете знать, насколько сильно вы не знаете высоту окна просмотра вашего пользователя. Возможно, вам стоит рассмотреть возможность переполнения содержимого для прокрутки, потому что я не могу себе представить, что вы хотите, чтобы часть вашего контента была невидимой.

Answer 2

Вы пробовали использовать свойство CSS max-height? Это из CSS 2 и не должно иметь проблем с совместимостью.

http://www.w3schools.com/cssref/pr_dim_max-height.asp

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

Answer 3

Я не совсем уверен, что вы после этого, но, возможно, это поможет вам близко:

http://jsfiddle.net/isherwood/TCVvn/1

#main { 
    height: 80%; 
    width: 80%; 
    position: absolute; 
} 
#header { 
    height: 50px; 
    position: relative; 
    top: 0; 
} 
#content { 
    position: absolute; 
    top: 70px; 
    right: 5px; 
    left: 5px; 
    bottom: 5px; 
    overflow: auto; 
} 

<div id="main"> 
    <div id="header">Header</div> 
    <div id="content">Content</div> 
</div> 

Answer 4

Держите overflow:hidden на <div id="#main"> и пусть контент div занимает столько же высоты, сколько и без ограничений переполнения. #main отрежет #content, если он становится слишком высоким, чтобы соответствовать внутри #main.