it-roy-ru.com

CSS Calc Viewport Units Обходной путь?

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

height: calc(100vh - 75vw)

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

47
golmschenk

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

СКРИПКА (в IE10 +)

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

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;
}
59
Danield

В качестве обходного пути вы можете использовать тот факт, что процент вертикального отступа и поля вычисляются из ширины контейнера. Это довольно уродливое решение, и я не знаю, сможете ли вы его использовать, но хорошо, оно работает: 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
MatTheCat
<div>It's working fine.....</div>

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

Проверьте здесь этот код CSS прямо сейчас поддерживают все браузеры без Opera

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

Жить 

см. предварительный просмотр jsfiddle

См. Предварительный просмотр по codepen.io

4
MD Ashik

Сделать это с помощью CSS Grid довольно легко. Хитрость заключается в том, чтобы установить высоту сетки 100vw, затем назначить одну из строк 75vw, а оставшуюся (необязательно) 1fr. Это дает вам, как я полагаю, то, что вам нужно, контейнер для изменения размера с фиксированным соотношением.

Пример здесь: https://codesandbox.io/s/21r4z95p7j

Вы можете даже использовать нижнее пространство Gutter, если захотите, просто добавив еще один «элемент».

Правка: Встроенный бегун кода StackOverflow имеет некоторые побочные эффекты. Перейдите по ссылке codeandbox, и вы увидите соотношение в действии.

body {
  margin: 0;
  padding: 0;
  background-color: #334;
  color: #eee;
}

.main {
  min-height: 100vh;
  min-width: 100vw;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 75vw 1fr;
}

.item {
  background-color: #558;
  padding: 2px;
  margin: 1px;
}

.item.dead {
  background-color: transparent;
}
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/index.css" />
  </head>

  <body>
    <div id="app">
      <div class="main">
        <div class="item">Item 1</div>
        <!-- <div class="item dead">Item 2 (dead area)</div> -->
      </div>
    </div>
  </body>
</html>

0
Artif3x