Рассчитать стоимость с помощью CSS3

Question

Есть ли способ добиться этого в CSS3?:

height: 100% -110px;

Мой контекст:

Answer 1

Вы не можете рассчитать это с чистым CSS. (это не будет работать во всех браузерах, как упомянуто Litek) Но есть организационный способ справиться с этим, но вам нужно будет заключить ваш элемент в другой:

body {
  height; 100%;
  padding: 0 0 20px;
}

div#wrap {
  background: #fff;
  height: 100%;
  padding: 0 0 20px;
  margin: 0 0 -20px;
}

div#wrap div { //this would be your actual element
  height: 100%;
  background: pink;
}

Answer 2

То, что вы хотите использовать, это calc(), который подключается к FF и, вероятно, webkit, но не рассчитывайте на его широкую поддержку в ближайшее время.

Что касается вашего примераВозможно, липкий нижний колонтитул будет для вас источником вдохновения.

---

Редактировать

В настоящее время он хорошо поддерживается основными браузерами:

http://caniuse.com/calc

Answer 3

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

Но есть простой метод для достижения эффекта.

Поместите все элементы в контейнер

с 'height: 100%', этот контейнер должен иметь положение относительно, чтобы вы могли расположить другие элементы внутри него относительно его положения.Поместите верхний колонтитул сверху и нижний колонтитул снизу с абсолютным позиционированием и вычислите с помощью javascript высоту, которую должен иметь div содержимого.

Вы также можете подписаться на событие window.onResize для пересчета при изменении размера окна..

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

Answer 4

В контексте было указано, что значение высоты 2-го деления не имеет большого значения.На самом деле важно только , где начинается и где заканчивается этот div .

Другими словами height = vertical end - vertical start:

#div2 {
    position:absolute;
    top:90px;/*20+50+20*/
    bottom:20px;
}

http://jsfiddle.net/cGwrw/3/