Ergebnis 1 bis 3 von 3

Thema: [CSS] height:100%; funktioniert nicht

  1. #1
    HTML Newbie Avatar von justanotherperson
    Registriert seit
    06.09.2015
    Ort
    Neo Seoul
    Beiträge
    8
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard [CSS] height:100%; funktioniert nicht

    Hi Leute,
    ich habe mir hier dieses Beispiel ( http://www.sitepoint.com/pure-css-of...vigation-menu/ ) angesehen und es erstmal per C&P ausprobiert. Dann habe ich es ein wenig angepasst und in meine Seite eingebunden.

    HTML-Code:
    <!DOCTYPE html>
     <head>
      <title>unfertiges Web Template von justanotherperson</title>
      <link rel="stylesheet" type="text/css" href="menu.css">
     </head>
     <body>
     <ul class="navigation">
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">Portfolio</a></li>
      <li class="nav-item"><a href="#">About</a></li>
      <li class="nav-item"><a href="#">Blog</a></li>
      <li class="nav-item"><a href="#">Contact</a></li>
     </ul>
     
     <input type="checkbox" id="nav-trigger" class="nav-trigger" />
     <label for="nav-trigger"></label>
     
     <div class="site-wrap">
       Inhalt
     </div>
     </Body>
    </html>
    CSS
    Code:
    .navigation {
        list-style: none;
        background: #CCCCCC;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
    }
    .nav-item {
     background-color: #CCCCCC;
    }
    .site-wrap {
        width: 100%;
     height: 100%;
        background-color: #FFFFFF;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
     padding: 0px;
     margin: 0px;
        background-image: linear-gradient(135deg, 
                          rgb(254,255,255) 0%,
                          rgb(221,241,249) 35%,
                          rgb(160,216,239) 100%);
        background-size: 200%;
    }
    .nav-trigger {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }
    label[for="nav-trigger"] {
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 2;
     width: 30px;
        height: 30px;
        cursor: pointer;
        background-image: url("hamburger-menu-ico.svg");
        background-size: contain;
     background-color:white;
    }
    .nav-trigger:checked + label {
        left: 215px;
    }
    .nav-trigger:checked ~ .site-wrap {
        left: 200px;
        box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
    }
    .nav-trigger + label, .site-wrap {
        transition: left 0.2s;
    }
    body {
        overflow-x: hidden;
     height: 100%;
    }
    Der rot markierte CSS Wert will einfach nicht funktionieren. Ich habe auch schon extra den Body auf 100% in der Höhe gesetzt, aber es tut sich nichts.

    Gruß
    justanotherperson
    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 !!!!!
    Ich bin eine super super schlaue Lebensweisheit.

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

    Standard AW: [CSS] height:100%; funktioniert nicht

    Hallo

    Ich habe auch schon extra den Body auf 100% in der Höhe gesetzt,
    Und html?

    Gruss

    MrMurphy

  3. #3
    HTML Newbie
    Themenstarter
    Avatar von justanotherperson
    Registriert seit
    06.09.2015
    Ort
    Neo Seoul
    Beiträge
    8
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: [CSS] height:100%; funktioniert nicht

    Das muss ich wohl übersehen haben. Ist aber eigentlich logisch, dass der html Tag genauso wie andere Tags auch ne Höhe hat. Da habe ich dann falsch gedacht. ^^ Danke. Hat super geklappt.
    Ich bin eine super super schlaue Lebensweisheit.

Ähnliche Themen

  1. height: 100%; funktioniert nicht!?
    Von DarkEmperor im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 01.09.2011, 01:51
  2. Warum funktioniert im DIV height:100%; nicht?
    Von Darkxor im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 06.08.2010, 15:32
  3. Seite funktioniert und funktioniert nicht
    Von parcifal83 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 24.05.2010, 15:24
  4. Height:auto funktioniert bei verschachtelten DIVs nicht?
    Von markise im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 05.08.2009, 19:44

Stichworte

Berechtigungen

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