css трудности со 100% высотой

Я пытаюсь создать страницу с панелью с левой стороны. Панель имеет заголовок, область содержимого и нижний колонтитул. Предполагается, что основной обертка панели панели составляет 100% от высоты страницы. Верхний и нижний колонтитулы не имеют заданной высоты, потому что я хочу, чтобы они были достаточно большими для их текста и заполнения, в то время как центральная область содержимого я хочу быть на 100% от контейнера минус высота верхнего и нижнего колонтитула. Я не уверен, как или если я могу сделать это в css. Кто-нибудь знает, что делать здесь? Благодарю.css трудности со 100% высотой

HTML-страница & КСС здесь - https://gist.github.com/1641918

источник

2012-01-19 geoff swartz

Смотрите мой высоко родственный вопрос здесь: http://stackoverflow.com/questions/7391661/set-html-element-to-have-100-height-on-page-with- заголовок –

Вы можете использовать дисплей в виде таблицы, чтобы выполнить это. Установив высоту 100% в строке контента, а затем на остальных 0%. Таблицы стараются, чтобы их ряды максимально совпадали с указанными высотами.

http://jsfiddle.net/PZALU/

html, body { height: 100%; width: 100%; } 
div#container { display: table; height: 100%; width: 100%;} 
div#container > div { display: table-row; } 
div#container > div > div { display: table-cell; border: 1px solid gray; } 
div#header { height: 0%; } 
div#content {height: 100%; background: lightgray; } 
div#footer { height: 0%; }

источник

2012-01-20 03:52:08 mrtsherman

Большое спасибо. Замечательно! –

Я имел дело с этим несколько раз. Это возможно, чтобы с помощью CSS в одном или двух конкретных случаях из моего опыта. В противном случае вам нужно будет пометить команду с помощью Javascript и CSS. Поскольку для того, чтобы установить элемент на высоту 100%, высота его родительского элемента должна быть изменена. В зависимости от того, насколько глубоко вложен элемент и какие братья и сестры, которые он может или не может иметь до него, определит, возможно ли это сделать с помощью CSS.

Один из способов получения контейнера-контейнера conent на 100% окна просмотра браузера высоты - это следующие стили.

html { 
    height:100%; 
} 
body { 
    height:100%; 
} 
#container { 
    min-height:100%; 
    max-height:100%; 
} 

<html> 
<body> 
    <div id="container"> 
    ... 
    </div> 
</body> 
</html>

Это может легко стать сложным в зависимости от компоновки.

источник

2012-01-19 22:06:09 CSSDevMonkey

css трудности со 100% высотой

ответ

Смежные вопросы