Из того, что я видел в других ответах, элементы просмотра CSS не могут использоваться в calc(). Я хотел бы получить следующее утверждение:
height: calc(100vh - 75vw)
Есть ли какой-нибудь способ обхода, который я могу достичь, используя чисто CSS, даже если единицы отображения не могут использоваться в инструкции calc()? Или просто CSS и HTML? Я знаю, что могу делать это динамически с помощью javascript, но я бы предпочел CSS.
Прежде чем ответить на это, я хотел бы указать, что Chrome и IE 10+ фактически поддерживают calc с единицами просмотра.
1) Начните, установив высоту как 100vh.
2) С установкой размера рамки в рамку - добавьте верхнюю часть 75vw. Это означает, что заполнение будет частью внутренней высоты.
3) Сдвиньте лишнюю верхнюю часть с отрицательным верхним краем
div
{
/*height: calc(100vh - 75vw);*/
height: 100vh;
margin-top: -75vw;
padding-top: 75vw;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: pink;
}
В качестве обходного пути вы можете использовать тот факт, что процентная доля по вертикали и маржа вычисляются из ширины контейнера. Это довольно уродливое решение, и я не знаю, сможете ли вы его использовать, но он работает: http://jsfiddle.net/bFWT9/ p >
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>It works!</div>
</body>
</html>
html, body, div {
height: 100%;
}
body {
margin: 0;
}
div {
box-sizing: border-box;
margin-top: -75%;
padding-top: 75%;
background: #d35400;
color: #fff;
}
<div>It working fine.....</div>
div
{
height: calc(100vh - 8vw);
background: #000;
overflow:visible;
color: red;
}
Отметьте здесь этот код css прямо сейчас поддерживают все браузер без Opera
Live
см. Предварительный просмотр в реальном времени jsfiddle
См. Предварительный просмотр в реальном времени с помощью codepen.io