2017-11-14 20 views
0

ヘッダー/ navの下とフッターの上のフルハイトで作業することはできません。サイドバーの高さ100%が動作しません

<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> 

ここに私のHTMLとCSSがあります。誰かが解決策を知っていることを願っています。 https://codepen.io/Midoriakwa/pen/wPqzZv

+0

'' 'html、body、main、.row、.sidebar { 高さ:100%; } '' ' –

答えて

3

サイドバー(col-3 sidebar)には、親要素があり、クラスはrowです。

row要素は、明示的なheightセットを持っていないので、height: 100%は、子要素(col-3 sidebar)上では動作しません。

height: 100%を使用して、あなたはの線に沿って何かを言っている:親の身長

親は何heightを持っていない場合の

使用100%を、何も起こりません。

さらに明確にするためthis questionを参照してください。

+0

行の高さを100%に設定してサイドバーを設定しようとしましたが、動作しません... – Midorikawa

+0

これは、' row'の親に 'height'がないためです。あなたはそれを得る? 'height:100%' ** **ルールが設定されている親要素に**明示的な '' height''が設定されている場合のみ** **動作します。 – justinw

+1

@Midorikawaあなたのペンを見ると、どの要素にも明示的な 'height'が設定されていないので、' height:100% 'は動作しません。これを達成するより良い方法は、すべての要素に 'height'を設定するよりも - フレックスボックスを見てください(https://css-tricks.com/snippets/css/a-guide-to-flexbox/) – justinw

0

100%だけ代わりheight: 100vhを用いて100%トライを使用する、それに

の行で、そのコンテナのサイズの100%を作っています。

+0

もし私が100vhに設定していれば、例えば、サイドバーの左側にメインバーの左側にもっと多くのものが追加されたということはありませんか? – Midorikawa

+0

100vhの高さを設定すると、ビューポートの高さの100%を使用することを意味します。そこに参照してください:https://developer.mozilla.org/en-US/docs/Web/CSS/length#Relative_length_units – YouDeserveThat

+0

'100vh'は'サイドバー 'が100%のviewportではなく、 'main'要素の100% - [flexboxを使う](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) – justinw

関連する問題