CSSコンテナ内のサイドバーの高さ

Question

ヘッダー、フッター、および右手バーを備えた基本的なサイトを開発するために、非常に基本的なテンプレートを作成しました。

は誰が助言でした：私はすべての親と自身が100％に設定されている右のバーのdivを確保した後、ページの100％に、右側のバーを設定するために苦労してい

私は間違っている？

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
article, 
 
aside, 
 
details, 
 
figcaption, 
 
figure, 
 
footer, 
 
header, 
 
hgroup, 
 
main, 
 
nav, 
 
section, 
 
summary { 
 
    display: block; 
 
} 
 
body { 
 
    font: 16px/26px Helvetica, Helvetica Neue, Arial; 
 
    height: 100%; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    min-height: 100%; 
 
} 
 

 
/* Header */ 
 
.header { 
 
    height: 50px; 
 
    background: #FFE680; 
 
} 
 

 
/* Middle */ 
 
.middle { 
 
    width: 100%; 
 
    padding: 0 0 50px; 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
.middle:after { 
 
    display: table; 
 
    clear: both; 
 
} 
 
.container { 
 
    width: 100%; 
 
    float: left; 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 
.content { 
 
    height: 100%; 
 
} 
 

 
/* Right Sidebar */ 
 
.right-sidebar { 
 
    float: right; 
 
    width: 250px; 
 
    margin-left: -250px; 
 
    position: relative; 
 
    background: #FFACAA; 
 
    height: 100%; 
 
} 
 

 
/* Footer */ 
 
.footer { 
 
    margin: -50px auto 0; 
 
    height: 50px; 
 
    background: #BFF08E; 
 
    position: relative; 
 
}

<div class="wrapper"> 
 
    <header class="header"> 
 
    <strong>Header:</strong>Header 
 
    </header> 
 
    <div class="middle"> 
 
    <div class="container"> 
 
     <main class="content"> 
 
     <strong>Content:</strong>Content 
 
     </main> 
 
    </div> 
 
    <aside class="right-sidebar"> 
 
     <strong>Right Sidebar:</strong>Right sidebar 
 
    </aside> 
 
    </div> 
 
</div> 
 
<footer class="footer"> 
 
    <strong>Footer:</strong>Footer 
 
</footer>

Answer 1

<div class="middle">要素が展開されないためです。 heightを別の方法で設定する必要があります。ビューポート単位を使用してビューポートの高さ全体を取得し、ヘッダーとフッターを引きます。

.middle { 
    ... 
    height: calc(100vh - 100px); 
} 

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
article, 
 
aside, 
 
details, 
 
figcaption, 
 
figure, 
 
footer, 
 
header, 
 
hgroup, 
 
main, 
 
nav, 
 
section, 
 
summary { 
 
    display: block; 
 
} 
 
body { 
 
    font: 16px/26px Helvetica, Helvetica Neue, Arial; 
 
    height: 100%; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    min-height: 100%; 
 
} 
 

 
/* Header */ 
 
.header { 
 
    height: 50px; 
 
    background: #FFE680; 
 
} 
 

 
/* Middle */ 
 
.middle { 
 
    width: 100%; 
 
    padding: 0 0 50px; 
 
    position: relative; 
 
    height: calc(100vh - 100px); 
 
} 
 
.middle:after { 
 
    display: table; 
 
    clear: both; 
 
} 
 
.container { 
 
    width: 100%; 
 
    float: left; 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 
.content { 
 
    height: 100%; 
 
} 
 

 
/* Right Sidebar */ 
 
.right-sidebar { 
 
    float: right; 
 
    width: 250px; 
 
    margin-left: -250px; 
 
    position: relative; 
 
    background: #FFACAA; 
 
    height: 100%; 
 
} 
 

 
/* Footer */ 
 
.footer { 
 
    margin: -50px auto 0; 
 
    height: 50px; 
 
    background: #BFF08E; 
 
    position: relative; 
 
}

<div class="wrapper"> 
 
    <header class="header"> 
 
    <strong>Header:</strong>Header 
 
    </header> 
 
    <div class="middle"> 
 
    <div class="container"> 
 
     <main class="content"> 
 
     <strong>Content:</strong>Content 
 
     </main> 
 
    </div> 
 
    <aside class="right-sidebar"> 
 
     <strong>Right Sidebar:</strong>Right sidebar 
 
    </aside> 
 
    </div> 
 
</div> 
 
<footer class="footer"> 
 
    <strong>Footer:</strong>Footer 
 
</footer>

Answer 2

あなたはこのコードを追加し、CSSポジショニングを使用することができます。 .wrapper について

、.RIGHT-サイドバーについて

position: relative; 

を追加し、また、.RIGHT-サイドバープロパティで、

を除去

position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 

を使用

float: right; 
margin-left: -250px; 
position: relative; 
height: 100%; 

あなたのお役に立てば幸いです。