サイドバーの高さを正しく設定する方法は？

Question

私は私のサイドバーは、この絵のように見えるようにしようとしている： http://s21.postimg.org/aerg28ih3/image.jpg

ページの高さが小さすぎると、それは次のようになります。それはあまりにも長い間だとき https://s21.postimg.org/7ly8i7i4n/big.jpg

、それは次のようになります。 https://s21.postimg.org/qsbfldymf/small.jpg

私は各ページに固定値を入れなければなりませんでしたが、私は固定値を入れたくありません。

body { 
 
    background-color: #edf1f2; 
 
    color: #777; 
 
    font: normal 15px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    margin: 0 auto; 
 
    padding: 0 10px; 
 
    width: 1040px; 
 
} 
 
header { 
 
    height: 120px; 
 
    background: #171a21; 
 
    background-image: url(images/header.png); 
 
} 
 
header h1 { 
 
    float: left; 
 
    margin-top: 32px; 
 
} 
 
header nav { 
 
    float: right; 
 
    padding-top: 7px; 
 
} 
 
header nav ul li { 
 
    float: left; 
 
    display: inline-block; 
 
    margin-top: 50px; 
 
} 
 
header nav ul li a { 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    display: block; 
 
    margin-right: 20px 
 
} 
 
#side { 
 
    float: left; 
 
    padding: 2%; 
 
    background: #1e262c; 
 
    margin-bottom: -5000px; 
 
    padding-bottom: 60.5%; 
 
} 
 
#side ul li { 
 
    margin: 10px 0; 
 
}

<header> 
 
    <div class="wrapper"> 
 
    <h1>WEB</h1> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#.html">1</a> 
 
     </li> 
 
     <li><a href="#.html">2</a> 
 
     </li> 
 
     <li><a href="#.html">3</a> 
 
     </li> 
 
     <li><a href="#.html">4</a> 
 
     </li> 
 
     <li><a href="#.html">5</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 

 
<div id="side"> 
 
    <ul> 
 
    <li> 
 
     <h6>Links</h6> 
 
    </li> 
 
    <li><a href="#">1</a> 
 
    </li> 
 
    <li><a href="#">2</a> 
 
    </li> 
 
    <li><a href="#">3</a> 
 
    </li> 
 
    <li><a href="#">4</a> 
 
    </li> 
 
    <li><a href="#">5</a> 
 
    </li> 
 
    <li><a href="#">6</a> 
 
    </li> 
 
    </ul> 
 
</div>

おかげ

Answer 1

あなたはこのような何かを行うことによってCSSのvhとcalcを利用することができます。これは言う何

body, html {margin: 0; padding: 0;} 

#header { 
    height: 100px; 
} 
#footer { 
    height: 100px; 
} 
#sidebar { 
    height: calc(100vh - 200px); /*WINDOW HEIGHT - HEADER & FOOTER */ 
} 

は、「ウィンドウの100％ヘッダーとフッターの高さから200ピクセルを差し引いたものです。サイドバーは、高さを調整して常に2つの間の領域を埋めるでしょう。

効果的に使用すると、this quick demonstration I whipped upのようなことができます。コンテンツの量にかかわらず、サイドバーは常に2つの間でフィットすることに注意してください。

Answer 2

html { height: 100%; margin: 0; }を追加し、サイドバーのために、このCSSを使用します。

#side { 
    box-sizing: border-box; 
    float: left; 
    padding: 2%; 
    background: #1e262c; 
    height: calc(100% - 120px); 
} 

それはそれを完全な高さマイナスヘッダーの高さを示します（120ピクセル）。

html { 
 
    height: 100%; 
 
    margin: 0 
 
    } 
 
body { 
 
    background-color: #edf1f2; 
 
    color: #777; 
 
    font: normal 15px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    margin: 0 auto; 
 
    padding: 0 10px; 
 
    width: 1040px; 
 
} 
 
header { 
 
    height: 120px; 
 
    background: #171a21; 
 
    background-image: url(images/header.png); 
 
} 
 
header h1 { 
 
    float: left; 
 
    margin-top: 32px; 
 
} 
 
header nav { 
 
    float: right; 
 
    padding-top: 7px; 
 
} 
 
header nav ul li { 
 
    float: left; 
 
    display: inline-block; 
 
    margin-top: 50px; 
 
} 
 
header nav ul li a { 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    display: block; 
 
    margin-right: 20px 
 
} 
 
#side { 
 
    box-sizing: border-box; 
 
    float: left; 
 
    padding: 2%; 
 
    background: #1e262c; 
 
    height: calc(100% - 120px); 
 
} 
 
#side ul li { 
 
    margin: 10px 0; 
 
}

<header> 
 
    <div class="wrapper"> 
 
    <h1>WEB</h1> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#.html">1</a> 
 
     </li> 
 
     <li><a href="#.html">2</a> 
 
     </li> 
 
     <li><a href="#.html">3</a> 
 
     </li> 
 
     <li><a href="#.html">4</a> 
 
     </li> 
 
     <li><a href="#.html">5</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 

 
<div id="side"> 
 
    <ul> 
 
    <li> 
 
     <h6>Links</h6> 
 
    </li> 
 
    <li><a href="#">1</a> 
 
    </li> 
 
    <li><a href="#">2</a> 
 
    </li> 
 
    <li><a href="#">3</a> 
 
    </li> 
 
    <li><a href="#">4</a> 
 
    </li> 
 
    <li><a href="#">5</a> 
 
    </li> 
 
    <li><a href="#">6</a> 
 
    </li> 
 
    </ul> 
 
</div>