Ergebnis 1 bis 3 von 3

Thema: Brauche hilfe bei dem Befehl height

  1. #1
    Youngster
    Registriert seit
    17.06.2015
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Brauche hilfe bei dem Befehl height

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    573
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Brauche hilfe bei dem Befehl height

    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:

    Code:
    <!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>
    Gruss

    MrMurphy

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    17.06.2015
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Brauche hilfe bei dem Befehl height

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

Ähnliche Themen

  1. min height, div hilfe
    Von rko_49 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 08.11.2010, 19:52
  2. Brauche Hilfe bei mouseover oder hover befehl
    Von Poldy1144 im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 24.09.2009, 16:17
  3. brauche befehl für auslesen und anzeigen
    Von devilsart.de.vu im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 10.06.2007, 04:18
  4. hilfe bei table height 100%
    Von Stresemann im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 23.10.2006, 16:18
  5. Brauche dringend html befehl!
    Von sn00zer im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 14.11.2004, 09:47

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •