Brauche hilfe bei dem Befehl height

renegadeX

Hallo,

ich habe in eine <div> mit der id "content". Diese sitzt im <body> mit Höhe 100%. Dort ist ein header mit fester Höhe. Die division soll nun den restlichen Bereich der 100% ausfüllen.
Das Problem ist ja, dass height nicht vererbt wird oder einen Wert hat wie "fill rest" oder so. Wenn ich also der Division nun auch 100% gebe, geht sie über den Body.

Gibt es eine Möglichkeit das zu lösen? Sowas wie height: (100% - 150px); oder so etwas?

mfG

MrMurphy

Hallo,

ich bevorzuge mit aktuellem HTML / CSS Lösungen ohne Berechnungen. Du kannst dem header natürlich eine fixe Höhe geben. Der Quelltext könnte zum Beispiel so aussehen:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Volle Höhe</title>
   <meta name="description" content="Überschrift mit Hintergrundbild">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Hack für IE 10 und IE 11 */
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         html {
            height: 100%;
         }
      }
      @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);


      /*Grundeinstellungen*/
      @media all {
         * {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
         }
         html {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 100%;
         }
         body {
            height: 100%;
            min-height: 100vh;
            padding: 0;
            margin: 0;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
         }
         body>* {
            padding: 0 0.5rem;
            border: 2px solid silver;
            margin: 0.5rem;
         }
         header {
            /*height: 5rem;*/
         }
         div {
            flex: 1;
            -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */
         }
      }
   </style>
</head>
<body>
   <header>
      <h2>header</h2>
   </header>
   <div>
      <h2>main</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo liguladio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est.</p>
   </div>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

renegadeX

Ach ja ich vergaß zu erwähnen, dass die Breite und die Anordnung der Divisions nicht flexibel sondern statisch sein soll.

Tags