私のdivがラッパーの高さにとどまっていないのはなぜですか？

Question

誰かが解決策の方向を指すことができるかどうか疑問に思っていました！ 何らかの理由で、私の右揃えの高さが親div（mainwrapper）内にとどまっていないため、本文とラッパーの高さを100％に設定しています。

これを90％に設定しても、ウィンドウサイズを1920x1080より小さくすると、再びラッパーから外れます。

何かすべてがありがとう！

私はどこかで、通常これを引き起こす浮動小数点数だと読んでいますが、浮動小数点は何もありません。相対位置に配置されていると思います。

は、私は「バー」で、この最高の文言ていませんでしたので、ここでうまくいけば、これを支援するgyazoの画像です：https://gyazo.com/6661da9c5194e2c2619e5fe1b5e3f2c5 - あなたが見ることができるように、バーは、ラッパーの外に出る100％

をに設定されている場合

マイコード：

body { 
 
padding: 0; 
 
margin: 0; 
 
width: 100%; 
 
height: 100%; 
 
background-image: url(/css/images/backgroundimages/bgimg.png); 
 
} 
 

 
div#mainwrapper { 
 
width: 80%; 
 
height: 100%; 
 
margin-left: auto; 
 
margin-right: auto; 
 
border-left: 4px solid #000; 
 
border-right: 4px solid #000; 
 
box-shadow: 0px 0px 10px #000; 
 
background-color: rgba(0, 0, 0, 0.6); 
 
} 
 

 
div#menubar { 
 
background-color: rgba(41, 128, 185, 0.2); 
 
text-align: center; 
 
padding: 30px; 
 
border-bottom: 3px solid #000; 
 
} 
 

 
div#menubar a { 
 
text-align: center; 
 
padding: 31px; 
 
text-decoration: none; 
 
color: rgba(255, 255, 255, 1); 
 
transition: 0.3s; 
 
font-size: 1.1em; 
 
font-family: 'Muli', sans-serif; 
 
text-shadow: 2px 4px 7px #000; 
 
} 
 
div#menubar a:hover { 
 
background-color: rgba(0, 0, 0, 0.4); 
 
padding: 30px; 
 
font-size: 1.3em; 
 
transition: 0.3s; 
 
color: rgba(231, 76, 60, 1.0); 
 
text-shadow: 1px 1px 2px #000; 
 
font-weight: bold; 
 
border-right: 2px solid #000; 
 
border-left: 2px solid #000; 
 
} 
 

 
div#maincontent { 
 
width: 100%; 
 
height: 100%; 
 
} 
 

 
div#rightbar { 
 
width: 15%; 
 
height: 100%; 
 
background-color: rgba(0, 0, 0, 0.4); 
 
}

<div id="mainwrapper"> 
 
    <div id="menubar"> 
 
     <a href="index.php">HOME</a> 
 
     <a href="#">FRIENDS</a> 
 
     <a href="#">FORUM</a> 
 
     <a href="#">CONTACT</a> 
 
    </div> 
 
    <div id="maincontent"> 
 
     <div id="rightbar"> 
 
     
 
     </div> 
 
    </div> 
 
</div>

Answer 1

EDIT：div#rightbarにheight: 100%;を消去してみて、0に置き換えます

推論：100vhは、 '100％ビューポートの高さ'を意味します。だからあなたのブラウザウィンドウの高さはどんなものでも、高さは#rightbarになります。しかし、あなたはそれから高さを引く必要があります#menubar（85ピクセル）。 calc()がこれを達成するのに役立ちます。このCSSプロパティ/値のコンボをメモしておきます。これは、フッターをページの下部に貼り付けるために使用する可能性が高いからです（別名「スティッキーフッター」）。 -記号の両側にスペースがあることを確認してください。これらのスペースを含めないと、calc()関数は機能しません。

OLD ANSWER：私はあなたが希望しているのか理解していない場合、私は謝るが、私はそれに打撃を与えるだろう：#rightbarの高さは、実際にはラッパーの中にある - それは内部だけではありませんあなたが作成した国境は#menubarです。

border-bottom: 4px solid #000;をdiv#menubarから削除し、代わりにdiv#mainwrapperに移動してください。次に例を示します：https://jsfiddle.net/ms2e2e5v/1/