как сделать правильную высоту боковой панели?

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 пикселей для верхнего и нижнего колонтитула ». Затем боковая панель регулирует высоту, чтобы всегда заполнять область между ними.

При эффективном использовании вы можете сделать что-то вроде this quick demonstration I whipped up. Обратите внимание, что боковая панель всегда будет соответствовать друг другу, независимо от количества контента.

Answer 2

html { height: 100%; margin: 0; } Добавить и использовать этот CSS для боковой панели:

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

Это дает ему полную высоту минус высоту заголовка (120px).

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>