TS: Höhe des Elternelementes in calc() berücksichtigen

SELF-Forum

Höhe des Elternelementes in calc() berücksichtigen

TS (Versionen)
– Informationen zu den Bewertungsregeln

Hallo und guten Abend,

kann mit calc() eigentlich auch die Höhe des Elernelementes berücksichtigen?
Wenn ich z. B.

height: calc(20% - 100px);

nehme, werden (im Firefox) die 20% auf die aktuelle Breite des Elementes angewendet. Zumindest habe ich bisher nichts anderes zustande bekommen.

Grüße
TS

--
es wachse der Freifunk
https://harz.freifunk.net
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Höhe des Elternelementes in calc() berücksichtigen

    MrMurphy1
    – Informationen zu den Bewertungsregeln

    Hallo

    kann mit calc() eigentlich auch die Höhe des Elernelementes berücksichtigen?

    Ja. In der verlinkten Seite kann ich leider keine calc-Berechnung für height finden.

    Deshalb ein einfaches Beispiel:

    <!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Height-Berechnung mit calc 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
      }
   }

   /* ==================================================== */
   /* ***Ab hier beginnen die Angaben zur Problemlösung*** */

   @media all {
      html {
         height: 100%;
         min-height: 100vh;
         margin: 0;
      }
      body {
         height: 100%;
         min-height: 100vh;
         border: 3px double blue;
         margin: 0 auto;
      }
      main {
         height: calc(100% - 100px);
         /*height: 100%;*/
         border: 3px double red;
      }
   }

   /* ***       Ende der Angaben zur Problemlösung***       */
   /* ===================================================== */

   </style>
</head>
<body>
   <main role="main">
      <p>main</p>
   </main>
</body>
</html>

    Gruss

    MrMurphy

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Höhe des Elternelementes in calc() berücksichtigen

      TS
      – Informationen zu den Bewertungsregeln

      Hallo und guten Tag,

      kann mit calc() eigentlich auch die Höhe des Elernelementes berücksichtigen?

      schon mal vielen Dank für deine Ausführungen. Zur Zeit steige ich noch nicht durch, aber morgen ist ja auch noch ein Tag ;-)

      Grüße
      TS

      --
      es wachse der Freifunk
      http://freifunk-oberharz.de
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln