Höhe der Seitenleiste 100% funktioniert nicht

Ich kann die Seitenleiste nicht mit voller Höhe unter der Kopfzeile/nav und über der Fußzeile arbeiten.Höhe der Seitenleiste 100% funktioniert nicht

<html> 
    <head> 
    <meta charset="utf-8"> 
    </head> 
    <body> 
    <header> 
     <div class="header"> 
     <div class="row"> 
      <div class="col-3"> 
      <img src="img/logo.png" alt="test"> 
      </div> 
      <div class="col-6"> 
      <h1>Music</h1> 
      </div> 
      <div class="col-3"> 
      <button>sign in</button> 
      <button>sign up</button> 
      </div> 
     </div><!-- end row --> 
     <nav> 
      <ul> 
      <li><a href="#" class="active">home</a></li> 
      <li><a href="#">genres</a></li> 
      <li><a href="#">artists</a></li> 
      <li><a href="#">about</a></li> 
      <li><a href="#">contact</a></li> 
      </ul> 
     </nav> 
     </div><!-- end header --> 
    </header> 
    <main> 
     <div class="row"> 
     <div class="col-9"> 
      <p>test1</p> 
      <p>test1</p> 
      <p>test1</p> 
      <p>test1</p> 
      <p>test1</p> 
      <p>test1</p> 
      <p>test1</p> 
      <p>test1</p> 
      <p>test1</p> 
      <p>test1</p> 
      <p>test1</p> 
      <p>test1</p> 
     </div> 
     <div class="col-3 sidebar"> 
      <p>test2</p> 
     </div> 
     </div> 
    </main> 
    <footer><p>Here comes the footer at the bottom of the page with 100% width</p></footer> 
    </body> 
</html>

Hier sind meine HTML und CSS. Ich hoffe, jemand weiß, was die Lösung ist. https://codepen.io/Midoriakwa/pen/wPqzZv

Quelle

2017-11-14 Midorikawa

'' 'HTML, Körper, Haupt, .row, .Sidebar { Höhe: 100%; } '' ' –

Ihre Seitenleiste (col-3 sidebar), hat ein übergeordnetes Element, klassifiziert row.

Das row Element hat keine explizite height gesetzt, so height: 100% wird auf das Kind-Element nicht (col-3 sidebar).

Wenn height: 100% verwenden, Sie sagen etwas entlang der Linien von:

Verwenden 100% der Höhe des Eltern

Wenn die Eltern keine height hat, wird nichts passieren.

Weitere Informationen finden Sie unter this question.

Quelle

2017-11-14 19:59:22 justinw

Ich habe versucht, die Höhe der Zeile 100% und dann die Seitenleiste, aber es funktioniert nicht ... – Midorikawa

Das ist wahrscheinlich, weil das Elternteil von' row' nicht eine 'Höhe' hat. Du verstehst es? 'height: 100%' ** funktioniert nur, wenn das Elternelement, für das diese Regel festgelegt wurde, eine ** explizite ** 'height'-Einstellung hat. – justinw

@Midorikawa Wenn du deinen Stift anschaust, hast du kein explizites 'height' Set für irgendein Element, also wird' height: 100 %' nicht funktionieren. Es gibt bessere Möglichkeiten, dies zu erreichen, als "Höhe" auf jedem Element zu setzen - [siehe flexbox] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) – justinw

100% ist, so dass es nur 100% der Größe des Behälters, die eine Reihe ist, unter Verwendung von height: 100vh

Stattdessen 100% Versuchen zu verwenden.

Quelle

2017-11-14 20:01:32

wenn ich es auf 100vh setze bedeutet das nicht, dass ich an einem Punkt zum Beispiel viel mehr Dinge hinzugefügt habe (links neben der Seitenleiste) die Höhe der Seitenleiste stoppt? – Midorikawa

Das Festlegen einer 100-V-Höhe bedeutet, dass 100% der Ansichtsfensterhöhe verwendet werden. siehe dort: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Relative_length_units – YouDeserveThat

'100vh' ist kein guter Ansatz, wenn man bedenkt, dass die' sidebar' nicht zu 100% erwartet wird Ansichtsfenster, sondern 100% des 'main'-Elements - [flexbox verwenden] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) – justinw

Höhe der Seitenleiste 100% funktioniert nicht

Antwort

Verwandte Themen