Заполнить DIV между заголовком и нижним колонтитулом, но не более

Как я могу получить верхний и нижний колонтитулы с разделителем MainContent между ними, который заполняет всю доступную область, но никогда не простирается за пределы нижнего колонтитула или заголовка?Заполнить DIV между заголовком и нижним колонтитулом, но не более

Иными словами, заполните оставшееся пространство между заголовком и нижним колонтитулом, но никогда не используйте больше места?

enter image description here

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

Я попытался установить переполнение: скрыто; но это просто останавливает появление полос прокрутки, больше ничего.

Запрещено использование Javascript.

источник

2013-08-22 uSeRnAmEhAhAhAhAhA

Почему не CSS узнать из XAML от Microsoft? Мы должны иметь HorizontalAlignment: Left; Горизонтальное выравнивание: растягивание; или VerticalAlignment: справа; было бы здорово. – uSeRnAmEhAhAhAhAhA

Спасибо всем за вашу любезную помощь. :-) – uSeRnAmEhAhAhAhAhA

По существу, вы можете установить нижний атрибут как высоту нижнего колонтитула и установить свойство переполнения для автоматического добавления полосы прокрутки, когда это необходимо, что предотвратит ее переполнение.

например.,

#content { 
    position: absolute; 
    top: <height of header>px; 
    bottom: <height of footer>px; 
    overflow: auto; 
}

Вот демо: http://jsfiddle.net/bYdgj/1/

источник

2013-08-22 00:35:29 JaredMcAteer

После того, как я попробовал других, они действительно не работали так, как они предполагали, но я проверил вашу скрипку, и она работает очень хорошо. Я могу рассчитывать на полосу прокрутки только тогда, когда это необходимо. Ижелали, как этот подход. Спасибо :) – uSeRnAmEhAhAhAhAhA

Вы также можете установить его «переполнение: скрыто» ... но если контент идет ниже высоты содержимого div, нет простого способа увидеть его как пользователя. – JaredMcAteer

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

источник

2013-08-22 00:29:18 BrianM

- это заголовок, а нижний колонтитул всегда должен находиться в этом положении экрана?

Если да, то вы можете использовать собственность position: fixed; для css. Таким образом, вы можете привязать свой верхний и нижний колонтитулы к экрану окна.

Если они покрываются за счет основного DIV, бросить Z-индекс на нем и основное содержание DIV (убедитесь, что основное содержание имеет атрибут позиции и Z-индекс меньше, чем верхний и нижний колонтитулы)

После того, как вы сделаете это, вы можете бросить наценки на ваш основной контент DIV, чтобы убедиться, что он остается между вашим заголовком/сноска

источник

2013-08-22 00:31:31 haz0rd

Есть несколько возможных подходов:

сделать колонтитулы абсолютными, затем дайте телу высоту 100%
Если вы хотите, чтобы заполнить всю страницу, кроме верхнего и нижнего колонтитула с цветом или изображением, просто изменить тело background-color или background-image к тому, что вам нравится, и вы сделали
сделать содержание 100% и поместить заголовок и сноска top: 0 и bottom: 0
сделать колонтитулы position: fixed, но тогда ваш колонтитулы будет находиться в передней части тела

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

источник

2013-08-22 00:34:21 Pixelmonster

Заполнить DIV между заголовком и нижним колонтитулом, но не более

ответ

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