Принудително вложените divs да имат минимална височина от 100%?

Знам, че min-height: 100% ще работи само за заемане на минимум 100% от височината на своя родителски елемент, ако родителският елемент има някаква числова стойност за височина, но какво ще стане, ако имам няколко вложени div и искам всички те да имат мин. височина 100%? Опитах min-height:inherit, но и това не проработи? Знам, че вероятно мога да разреша този проблем с JavaScript, като просто проверя стойността на височината на браузъра при зареждане на документ и след това я присвоя на свойството min-height на моите вложени div, но бих искал да знам дали би било възможно да се реши това само с css?

Редактиране: Трябва също така да спомена, че имам нужда моят най-външен div и моите вложени div всички да имат минимална височина от 100%, така че да заемат поне височината на браузъра, но да се разширяват, ако необходими.


layout css position height
person hesson    schedule 11.08.2012    source източник

Отговори (2)


arrow_upward
22
arrow_downward

min-height: inherit; трябва да работи: http://jsfiddle.net/ugxbs/

РЕДАКТИРАНЕ

Що се отнася до процентните стойности и очакваното поведение, няма логика зад вложената мин. височина. Това, което трябва да направите, е да използвате свойството height за всички родители, след което да добавите min-height към най-вътрешния DIV.

F.ex:

<html>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
</html>

CSS:

html, body, .outer { height: 100% }
.inner { min-height: 100%; }

http://jsfiddle.net/4PsdT/

По този начин вие казвате на браузъра да настрои всички външни елементи от върха (HTML) на височина от 100%. Това ще накара тези елементи да се простират по височината на браузъра. След това просто добавете min-height към най-вътрешния елемент, който съдържа съдържанието.

Задаването на height не означава, че прекомерното съдържание на децата ще отпадне, освен ако не добавите overflow:hidden;. ​

person David Hellsing    schedule 11.08.2012
comment
Знам, че ще работи, когато най-външният div има числова стойност за min-height, но няма да успее, когато най-външният div има процент за min-height (което е, което ми трябва в моя случай). Имам нужда всичките ми вложени div да заемат поне височината на прозореца на браузъра, така че най-външният ми div трябва да има минимална височина от 100%, освен ако няма друг начин да се справя с този проблем. - person hesson; 11.08.2012
comment
@hesson Вижте моята редакция за опит да обясня защо вложената минимална височина не е логичен подход към проблема. - person David Hellsing; 14.08.2012
comment
Перфектно, точно това ми трябваше! - person hesson; 14.08.2012
comment
Всъщност настройката на външната височина на 100% кара прекомерното съдържание на децата да се провали. Най-малкото, ако след него има външен брат, той ще бъде покрит от вътрешното съдържание. jsfiddle.net/uL34X/1 - person Alex Che; 04.02.2014

arrow_upward
0
arrow_downward

Мога да го накарам да работи с височината на свойството, но не и с min-height.

http://jsfiddle.net/zDVqm/

person LeBen    schedule 14.08.2012