2016-06-16 39 views
1

http://codepen.io/anon/pen/gMMByKheight: 100% funktioniert nicht, wenn Semantic-UI

<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css"> 
</head> 

<body> 
    <div class="ui secondary pointing menu" id="menu"> 
    <a class="active item">Home</a> 
    <a class="item" href="/tests">Tests</a> 
    <a class="item">About us</a> 
    </div> 

    <div class="pusher"> 
    <div class="ui vertical center aligned segment top-section" id="firstDiv"> 

     <div class="ui container"> 
     <div class="ui text container"> 
      <h1 class="ui header">Heading</h1> 
     </div> 
     </div> 
    </div> 
    </div> 

</body> 

</html> 

mit Und das ist die begleitende CSS:

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 

.top-section { 
    height: 100%; 
} 

#menu { 
    background: #CFCFCF; 
} 

#menu a { 
    color: black; 
} 

#firstDiv { 
    background: #CFCFCF; 
    width: 100%; 
    margin-top: -1em; 
} 

Dies ist mein Code. Ich habe ein HTML, das mit Semantic UI erstellt wurde. Ich habe ein semantisches Menü und dann habe ich ein div, das eine Überschrift hat. Ich möchte, dass dieses div 100% meines Bildschirms in der Höhe belegt. Es wird ein zweites div geben, das nur beim Scrollen sichtbar sein soll.

Ich stieß auf this website, die ein Tutorial hatte. Obwohl ich dem Tutorial gefolgt bin, konnte ich die Höhe nicht auf 100% setzen. Bitte lassen Sie mich wissen, wo mein Fehler ist. Es ist nur eine Woche her, dass ich angefangen habe das zu lernen und das hat mich verrückt gemacht. Ich habe versucht, nach Antworten zu suchen, konnte aber nicht den finden, der meine Anfrage lösen würde. Vielen Dank für Ihre Hilfe und Entschuldigung, wenn dies nicht hier sein sollte oder wenn es zu einfach ist.

Antwort

3

1.) Das übergeordnete Element Ihres #top-section Elements ist .pusher, das keine definierte Höhe hat. Fügen Sie 100% Höhe hinzu.

2.) Sie haben 100% Höhe für .top-section definiert, aber als ID wird #firstDiv (die keine definierte Höhe hat) das übersteuern, also fügen Sie auch 100% Höhe hinzu.

http://codepen.io/anon/pen/pbbQNJ

Verwandte Themen