65

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

height: calc(100vh - 75vw)

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

4

4 に答える 4

78

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

フィドル(IE10+)

解決策 (他のブラウザーの場合): box-sizing

1) 身長を 100vh に設定することから始めます。

2) box-sizing が border-box に設定されている場合 - 75vw の padding-top を追加します。これは、パディングが内側の高さの一部になることを意味します。

3) 余分な padding-top を負の margin-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;
}
于 2014-01-22T09:37:55.083 に答える
6

回避策として、垂直方向のパディングとマージンの割合がコンテナの幅から計算されるという事実を使用できます。それはかなり醜い解決策であり、あなたがそれを使用できるかどうかはわかりませんが、うまくいきます：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;
}
于 2014-01-22T09:09:59.817 に答える