CSS: динамическая минимальная высота в зависимости от разрешения

Question

Можно ли рассчитать разницу между двумя div в файле css? Цель состоит в том, чтобы установить высоту содержимого div на максимальную высоту, что задано между фиксированным верхним и нижним колонтитулом. Например, у нас есть div заголовка с высотой 25%, а нижний колонтитул с высотой 15% фиксированный. Комната между контентом всегда должна быть заполнена полностью. Поэтому в связи с тем, что разрыв будет изменяться в зависимости, какое разрешение установлено на дисплее клиентов, мне нужно что-то вроде:

мин-высота = browserheight - (headerheight + footerheight)

так долго .. .

Answer 1

Это невозможно в чистом CSS. Но вы можете попробовать LESS/SASS. Это css-подобные языки, которые компилируются в чистый css.

http://lesscss.org/

@containerWidth : 1000px; 
@contentWidth : 800px; 

.side { 
    width : @containerWidth-@contentWidth; 
} 

Но со значениями, которые вы получаете от браузера это более сложно.

Например, ширина браузера или высота браузера. Вы можете получить это значение в LESS, выполнив некоторый javascript (это возможно в LESS). Но тогда ваш стиль будет работать, только если вы прикрепляете бездействующие файлы как свои стили и используете компилятор javascript в теге <script>, который при загрузке страницы делает из ваших меньших стилей - стилей css. Но это медленно.

Лучший способ использовать МЕНЬШЕ, - это отредактировать код в ваших .less-файлах, скомпилировать его .css и вставить чистые стили css на веб-сайт. Но если вы скомпилируете свои серверные страницы, высота или ширина браузера не могут быть получены.

Answer 2

В настоящее время CSS не поддерживает расчетные значения.

Есть некоторые экспериментальные новые функции CSS в конвейере, которые сделают это, которые в настоящее время прокладывают себе путь через процесс стандартизации и только начинают появляться в бета-версиях Chrome, Firefox и т. Д. Вы можете начать экспериментировать с ним теперь, но это будет долгое время, прежде чем у него будет достаточная поддержка браузера в реальном мире, которую вы можете использовать для реального сайта.

В то же время, если вы хотите узнать больше о функции CSS Calc(), взгляните на Mozilla Developer's site.

В старых версиях Internet Explorer была функция CSS Expressions, которая также была очень похожа на концепцию. Однако он никогда не был стандартизирован и больше не поддерживается.

Как сегодня, стандартный CSS не поддерживает такого рода вещи.

Альтернативы - использовать предварительный процессор CSS, такой как LESS или SASS. Обе эти программы представляют собой попытки расширить синтаксис CSS с помощью функций, подобных программированию, в отсутствие чистого решения CSS. Вы пишете свой CSS с использованием синтаксиса SASS или LESS, а затем конвертируете его в стандартный CSS, прежде чем загружать его на свой сайт.

Это может дать вам то, что вы ищете, хотя конечным результатом является по-прежнему стандартный CSS, вы по-прежнему не сможете выполнять динамические вычисления с ними.

Надеюсь, что это поможет.