web-dev-qa-db-ja.com

CSS Calcビューポートユニットの回避策

otheranswers で見たものから、CSSビューポートユニットはcalc()ステートメントでまだ使用できません。私が達成したいのは、次の声明です。

height: calc(100vh - 75vw)

ビューポート単位をcalc()ステートメントで使用できない場合でも、これを達成できる回避策はありますか？純粋にCSSを使用それともCSSとHTMLだけですか？ javascriptを使用して動的に実行できることは知っていますが、CSSを好むでしょう。

htmlcsscss3viewport-unitscss-calc
54
golmschenk

これに答える前に、ChromeおよびIE 10+が実際にビューポート単位での計算をサポートしていることを指摘したいと思います。

FIDDLE（IE10 +の場合）

解決策（他のブラウザーの場合）：ボックスサイズ

1）高さを100vhに設定して開始します。

2）ボックスサイズをborder-boxに設定して-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;
}
65
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によるライブプレビューを参照

5
MD Ashik

CSSグリッドでこれを行うのは非常に簡単です。トリックは、グリッドの高さを100vwに設定し、行の1つを75vwに割り当て、残りの1つ（オプション）を1frに割り当てることです。これは、私があなたが望んでいるものであると推測するものから、比率ロックされたサイズ変更コンテナを提供します。

ここの例： https://codesandbox.io/s/21r4z95p7j

別の「アイテム」を追加するだけで、下のガタースペースを選択することもできます。

編集：StackOverflowの組み込みコードランナーには、いくつかの副作用があります。 codesandboxリンクにポップすると、実際の比率が表示されます。

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