CSS: область содержимого высотой 100% с заголовком переменной высоты - PullRequest
Новая
       11

CSS: область содержимого высотой 100% с заголовком переменной высоты

4 голосов
/ 04 августа 2009

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

Любое решение должно работать в IE 6, 7 и 8, Firefox 3.x и Safari 4. Можно ли это сделать с помощью чистого CSS? Должен ли я сдаться и прибегнуть к табличному макету?

EDIT: Дополнительным требованием является то, что я могу разместить элементы внутри области содержимого и заставить их расширяться до полной высоты области содержимого (будь то высота области просмотра - высота заголовка - высота нижнего колонтитула или больше этой величины). Некоторый контент, который мы хотим отобразить, имеет свои собственные разделы «верхний и нижний колонтитулы», так что я действительно ищу нестабильное решение.

Ответы [ 6 ]

1 голос
/ 05 августа 2009

Хорошо, свойство CSS min-height не работает:)

Сейчас я поигрался с настоящим HTML-файлом, и я думаю, что нашел способ. 

.header-footer
{
    height: 10%;
    background-color: lightYellow;
    display: table;
    width: 100%;
}

.container
{
    margin-left: auto;
    margin-right: auto;
    height: 80%;
    width: 100%;
    display: table;
}

.inner
{   
    background-color: lightPink;
    height: 100%;
}

Мы используем свойство display: table, чтобы убедиться, что каждый <div> хорошо расположен под всеми остальными.

ПРИМЕЧАНИЕ. Необходимо установить свойство высоты для каждого элемента на странице. Это не должно быть 10%, что я выбрал, но, по крайней мере, что-то. Как только содержимое вставлено в элемент, который больше значения высоты, он должен раскрыться.

Я создал две отдельные HTML-страницы, чтобы вы могли проверить, подходит ли вам это:

Надеюсь, это то, что вы ищете.

Спасибо

0 голосов
/ 21 января 2014

Пожалуйста, попробуйте это для CSS: http://jsfiddle.net/K64Mm/6/ Переменная высота, высота содержимого 100% (поддерживается даже высота кадра iframe 100%), нет лишних полос прокрутки, прокрутка на сенсорных устройствах. 

<div class="wrapper">
    <div class="top topBar">

    </div> 
    <div class="content">
        <iframe scrolling="yes" src="http://www.zeffirino.com"></iframe>
    </div>
</div>

html, body { width: 100%; height: 100%; overflow: hidden; margin: 0px; padding: 0px; }

.wrapper { width: 100%; height: 100%; padding-bottom: 45px; -webkit-overflow-scrolling: touch !important; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.top { height: 45px; background-color: red; }
.content { height: 100%; width: 100%; overflow: auto !important; }
.content iframe { display: block; border: none; width: 100%; height: 100%; }
0 голосов
/ 21 января 2014

Пожалуйста, посмотрите эту скрипку: http://jsfiddle.net/qH6K3/

<div id="a">
    <div id="b1">BOX1</div>
    <div id="b2">BOX2</div>
</div>

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html,body{height:100%}

#b1 {
    background-color: red;
    height: 45px;
    width:100%;
}

#b2 {
    background: blue;
    height: 100%;
    width: 100%;
}

#a { height: 100%; padding-bottom: 45px; }
0 голосов
/ 01 января 2013

Я провел день, экспериментируя с этой опцией, и наткнулся на столько странных тупиков, что мой профессиональный совет теперь такой:

Вы сделали это неправильно.

Пропустить заголовок переменной высоты полностью. В любом случае, это глупая идея. Я сделал. Отлично сработало для меня. Теперь я являюсь счастливым обладателем значительно более простой паутины DOM и никаких препятствий, которые приведут меня к переполнению стека.

0 голосов
/ 04 августа 2009

Вы можете использовать CSS-свойство min-height в верхнем и нижнем колонтитулах, а также в содержимом.

, например 

.header-footer 
{
    min-height: 20%;
}

.content
{
    min-height: 80%;
}

Убедитесь, что для тегов <html> и <body> установлено значение min-height: 100%, таким образом вы можете заполнить весь видовой экран.

Это должно позволить странице расширяться по мере необходимости, но не превышать 100%.

Спасибо

0 голосов
/ 04 августа 2009

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

...