CSS Calc Viewport единицы обхода?

из того, что я видел в другое ответы, CSS viewport единицы не могут быть использованы в calc() заявления. Чего я хотел бы достичь, так это следующего утверждения:

height: calc(100vh - 75vw)

есть ли какой-то обходной путь, которым я могу достичь этого используя чисто CSS даже если единицы просмотра не могут быть использованы в calc() заявление? Или просто CSS и HTML? Я знаю, что могу сделать это динамически, используя javascript, но я бы предпочел CSS.

43
css css-calc css3 html viewport-units

3 ответов

прежде чем ответить на этот вопрос, я хотел бы отметить, что Chrome и IE 10+ фактически поддерживают calc с единицами просмотра.

скрипка (в IE10+)

решение (для других браузеров): box-sizing

1) Начните с установки вашей высоты как 100vh.

2)с размером коробки, установленным в border-box, добавьте верхнюю часть 75vw. Это означает, что обивка будет часть внутренней высоты.

3) просто компенсирует padding-top с отрицательным запасом-top

скрипка

div
{
    /*height: calc(100vh - 75vw);*/
    height: 100vh;
    margin-top: -75vw;
    padding-top: 75vw;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: pink;
}
54

в качестве обходного пути вы можете использовать тот факт, процентов по вертикали padding и margin рассчитывается от ширины контейнера. Это довольно уродливое решение, и я не знаю, сможете ли вы его использовать, но хорошо, он работает:http://jsfiddle.net/bFWT9/

<!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;
}
6
<div>It's working fine.....</div>

div
{
     height: calc(100vh - 8vw);
    background: #000;
    overflow:visible;
    color: red;
}

проверьте здесь этот код css прямо сейчас поддержка всех браузеров без Opera

просто проверьте это

Live

см. прямой просмотр по jsfiddle

посмотреть живой просмотр, сайт CodePen.Ио

3