wake-up-neo.net

CSS Calc Viewport-Einheiten Workaround?

Nach dem, was ich in otheranswers gesehen habe, können CSS-Viewport-Einheiten noch nicht in calc()-Anweisungen verwendet werden. Was ich erreichen möchte, ist folgende Aussage:

height: calc(100vh - 75vw)

Gibt es einen Workaround, wie ich dieses mit reinem CSSerreichen kann, obwohl die Viewport-Einheiten nicht in der calc()-Anweisung verwendet werden können? Oder nur CSS und HTML? Ich weiß, dass ich es mit Javascript dynamisch tun kann, aber ich würde CSS vorziehen.

47
golmschenk

Bevor ich dies beantworte, möchte ich darauf hinweisen, dass Chrome und IE 10+ Calc mit Viewport-Einheiten tatsächlich unterstützen.

GEIGE (In IE10 +)

Lösung (für andere Browser): Größe der Box

1) Beginnen Sie mit der Einstellung Ihrer Höhe auf 100 vh.

2) Wenn die Boxgröße auf den Randrahmen eingestellt ist, fügen Sie eine Auffüllfläche von 75 vw hinzu. Dies bedeutet, dass die Polsterung Teil der Innenhöhe ist. 

3) Versetzen Sie das zusätzliche Polsteroberteil einfach mit einem negativen Rand 

GEIGE

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

Als Problemumgehung können Sie die Tatsache verwenden, dass der Prozentsatz der vertikalen Auffüllung und des Randes aus der Containerbreite berechnet wird. Es ist eine ziemlich hässliche Lösung und ich weiß nicht, ob Sie sie verwenden können, aber es funktioniert: 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;
}

Überprüfen Sie hier diesen CSS-Code, der alle Browser ohne Opera unterstützt

einfach das überprüfen

Leben 

siehe Live-Vorschau von jsfiddle

Live-Vorschau von codepen.io anzeigen

4
MD Ashik

Dies mit einem CSS-Grid zu tun ist ziemlich einfach. Der Trick besteht darin, die Höhe des Gitters auf 100 vw einzustellen und dann eine der Reihen 75 vw und die verbleibende (optional) 1fr zuzuweisen. Dies gibt Ihnen, von dem, was ich vermute, einen veränderungsabhängigen Container zur Größenänderung.

Beispiel hier: https://codesandbox.io/s/21r4z95p7j

Sie können sogar den unteren Bereich der Dachrinne nutzen, wenn Sie dies wünschen, indem Sie einfach einen weiteren "Artikel" hinzufügen.

Bearbeiten: Der integrierte Code Runner von StackOverflow hat einige Nebenwirkungen. Gehen Sie zum Codesandbox-Link und Sie sehen das Verhältnis in Aktion.

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