Высота обтекателя, переполненная в нижний колонтитул

Question

Я хочу иметь липкий нижний колонтитул, но я также хочу, чтобы мой главный div заканчивался прямо перед нижним колонтитулом для высоты, но обертка не двигается вверх, как обычно, если у вас есть отрицательный запас, и я Не знаю почему. Даже с минимальной высотой я должен был бы ее поднять. Когда я увеличиваю отрицательную маржу, ничего не происходит. В принципе, мне просто нужна моя обертка, чтобы она составляла 100-процентную высоту минус высота нижнего колонтитула. Интересующим является тот, который имеет синий фон. Теперь моя боковая панель отлично (или, по крайней мере, она должна быть), поскольку она заканчивается прямо перед черным нижним колонтитулом.

html { 
 
    height: 100%; 
 
} 
 

 
body{ 
 
    height: 100%; 
 
    margin:0; 
 
    font-family: courier; 
 
    font-size: 22px; 
 
    color: white; 
 
    background-color: #99ff33; 
 
} 
 

 

 
#wrapper{ 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 85%; 
 
    background-color: blue; 
 
    min-height: 100%; 
 
    height: calc(100vh-130px); 
 
    margin-bottom: -130px; 
 
} 
 

 
#wrapper:after{ 
 
    content: ""; 
 
    display:block; 
 
} 
 

 
#footer, #wrapper:after{ 
 
    height: 130px; 
 
} 
 

 

 
.wrap { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    flex-wrap: nowrap; 
 
} 
 

 
.sub { 
 
    padding: 12px; 
 
    width: 32%; 
 
    height: 100px; 
 
    color: white; 
 
    border-right: solid white 1px; 
 
} 
 

 
.sub:last-child{ 
 
    border: 0px; 
 
} 
 

 
#sidebar{ 
 
    float:left; 
 
    background-color: yellow; 
 
    height:calc(100vh - 130px); 
 
    width: 7.5%; 
 
    border: 1px solid blue; 
 
} 
 

 
#footer { 
 
    display: flex; 
 
    height: 130px; 
 
    width: 100%; 
 
    background-color: black; 
 
    clear: both; 
 
}

<div id="sidebar"></div> 
 
<div id="wrapper"></div> 
 
<div id="footer"> 
 
    <div class="wrap"> 
 
     <div class="sub"></div> 
 
     <div class="sub"></div> 
 
     <div class="sub"></div> 
 
    </div> 
 
</div>

Answer 1

Вы перепутали свои направления, глупый гусь!

#wrapper{ 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    width: 85%; 
    background-color: blue; 
    min-height: 100%; 
    height: calc(100vh-130px); 
    margin-top: -130px; 

} 

margin-top против margin-bottom

Answer 2

Удалить min-height: 100%; это сделает его всегда сделать его 100% высота его родителей. Добавьте пробел в math в функцию calc и добавьте border, чтобы сделать его того же размера, что и ваша панель инструментов. Я также удалил позицию relative.

Вот новый CSS для #wrapper:

#wrapper{ 
    margin-left: auto; 
    margin-right: auto; 
    border: 1px solid blue; 
    width: 85%; 
    background-color: blue; 
    height: calc(100vh - 130px); 
} 

И в jsfiddle.

UPDATE:

Вот цитата из MDN об окружающем операндом известково с пробелами:

Примечание: + и - операторы всегда должны быть окружены пробелами. Например, операнд calc (50% -8px) будет анализироваться как процент, за которым следует отрицательная длина, недопустимое выражение, в то время как операнд calc (50% - 8px) представляет собой процент, за которым следует знак минус и длина , Более того, calc (8px + -50%) обрабатывается как длина, за которой следует знак плюс и отрицательный процент. Операторы * и/не требуют пробелов, но их добавление для согласованности разрешено и рекомендуется.

Вы можете узнать больше о calc here.

Кроме того, calc не поддерживается и может быть изменен. Поэтому я бы не рекомендовал использовать его или, по крайней мере, иметь резервную копию.