Wie man mit CSS calc() mit einem element Höhe

War ich das Studium Möglichkeiten, um ein Sechseck mit nur CSS, und fand eine Lösung gibt, die mir regelmäßige Sechsecke auf der Grundlage der Breite:

.hexagon {
  height: 100%;
  width: calc(100% * 0.57735);
  display: inline-block;
}

Jedoch, der code funktioniert durch die Generierung von neuen Rechtecke basierend auf den übergeordneten Elements Breite. Ich war auf der Suche nach einer Möglichkeit zum berechnen der Breite des übergeordneten Elements Höhe.

Gibt es eine Möglichkeit, um ein element zu verwenden height-Eigenschaft anstelle von width für calc()? (Ich bin nicht auf der Suche in die Verwendung vh da der nächste Elternteil nicht immer den viewport). Ich googelte herum und konnte keine Antwort finden.

  • Haben Sie aber etwa mit Sass oder Less?
  • Wenn er oder Sie hat, welche Lösung würden Sie vorschlagen? Wie würde es helfen bei der Frage?
  • Ich würde gerne wissen, ob es eine einfache Möglichkeit, dies zu tun, ohne SASS oder WENIGER, aber schreiben Sie Ihre Antwort, die hilfreich sein könnten.
  • calc() wird nicht in der Breite nichts, es nur tun, die einfache Bedienung, die zwischen der linken Seite und der rechten Seite durch den Betreiber. . So im Fall der relativen Werte (wie hier 100%) es zuerst konvertiert diesen Wert ein absoluter. Sie können sich nicht über ein weiteres element, das den relativen Wert noch eine andere preoperties btw...
  • Ich Frage es, weil ich zunächst wissen wollte, ob er/Sie will, um Benutzer zu anderen Technologien
  • falsch: wenn Sie 100vw berechnet es über die viewport-Breite.
  • nicht falsch, 100vw ist eine relative Länge, die (relativ zum viewport nicht zu jedem element). e.g, das ist nicht unbedingt das gleiche wie documentElement Breite jsfiddle.net/2bxbd3w5
  • Dieser code muss nicht einmal calc, denn es ist die gleiche wie 57.735%
  • dies ist nur ein Beispiel... haben einen Blick auf den Titel meiner Frage

InformationsquelleAutor Luciano | 2015-11-18
  1. 27

    Ich denke, Sie versuchen zum ausführen von Skripts in eine css-syntax, die NICHT MÖGLICH.

    calc() können einfache mathematische operation mit absoluten Werten, kann es nicht finden, die Höhe eines Elements, und führen Sie dann Mathe auf es.

    In Fall, dass Sie eine Lösung gefunden haben bitte lassen Sie mich wissen. Das würde helfen, eine Menge

    Prost!!

    • Leider habe ich auch nicht..., Deine Antwort scheint der richtige zu sein.
    • Seine 2018-und das ist noch nicht verfügbar. Web ist kaputt af.
    • Die Menschen waren über dieses in 2012, cmon.
    InformationsquelleAutor YAMAN
  2. 1

    Es ist nicht möglich wie @YAMAN sagte, aber ich habe einen trick mit Ihnen teilen, nur für den Fall, es funktioniert und helfen Ihnen.

    top: calc(50% - 0.59em);

    Um es zu testen, da ein div mit einer Größe und einem text innerhalb, erhöhen Sie die Schriftgröße, bekommen manuell die Höhe und teilen es durch 2 ersetzen Sie den 0,59-em durch diesen Wert und Sie werden wahrscheinlich sehen, dass Sie die Aufenthalte in der gleichen px.

    Bemerken, dass ich bereits weiß, dass dies nicht zu 100% präzise, aber es funktioniert ganz anständig für die paar Szenarien, check it out für Sie, die passen könnten in Ihrem Fall möglicherweise nicht.

    • verwenden Sie keine Ränder
    InformationsquelleAutor Alejandro Lora
  3. 0

    Umgehen kannst du das problem über einen Vermittler: CSS-Variablen, die nur die Daten "außerhalb" der geschweiften Klammern, wie es war.

    Wenn die Eltern die Breite auch dynamisch oder abhängig von einem anderen Wert, verwenden Sie einen anderen var für, die. Nur als Beispiel, damit Sie sehen können, die syntaxis, es würde in etwa so Aussehen:

    :root {
  --hex-parent-height: 10px;
}

.hexagon.parent {
  /* ... */
  width: var(--hex-parent-height);
}

.hexagon {
      height: 100%;
      width: calc(100% * var(--hex-parent-height));
      display: inline-block;
    }

    CSS-Variablen haben zwei Arten von Bereichen: Globale und lokale. Lokale vars funktioniert nur logisch in der gleichen Selektor, sondern global vars sind die gleichen durch alle deine CSS. Die Deklaration einer oder mehrerer Variablen Global erfolgt über den root-block, wie dargestellt, im code-Beispiel.

    Abrufen ein var-Wert, wie Sie sehen können, ist so einfach wie mit der var() die CSS-Funktion, die in Fall, dass Sie nicht wissen, eine sehr schön fallback-Funktion.

    Zum Beispiel, wenn Sie wurden zu setzen --hex-parent-height dynamisch und etwas geht schief und die var übrig ist ausgeschaltet, Sie können fügen Sie ein default-Wert zum minimieren der Schäden, etwa so: var(--hex-parent-height, 10px)

    InformationsquelleAutor Carles Alcolea
Schreibe einen Kommentar