Как заполнить свободное пространство?

Question

[zelsky]

Есть fixed navbar взят от сюда Есть футер взят от сюда

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

Хочу заполнить пространство между ними. в зависимости от height.
Делал так НО центральни блок лезет под футер. Если делать #middle { top:50px;}.Подскажите куда копать.

Comments

[Андрей Б.]

там же человек ответил с примером jsfiddle.net/jz4rb/4 или я чего не понял?

[zelsky]

Андрей Б.: Дак я говорю у меня navbar кастомний. И когда я делаю отступ в 50 от верху, то у меня мидл под футер лезет.

[zelsky]

Андрей Б.:

Answer 1

[zelsky]

Navbar - 50px + footer-82px = 132px; 
.block {
    height: calc(100vh - 132px);
    padding-top: 50px;
    background-color: black;
}
#map {
    height: 100%;
}

Comments

[Alex]

т.е. футер постоянно весит на экране?

Answer 2

[Alex]

Посмотрите как сделано тут getbootstrap.com/examples/sticky-footer-navbar

Comments

[zelsky]

В том и дело что не хочу тащить весь бутстрап ради 10 строк css

[Андрей Б.]

BlastPy Где логика? Вы не хотите тянуть весь BS, прекрасно, это и не нужно. F12 и перед вами весь код который вам нужен. Скопипастили готовые примеры не вникая как это работает, в инспекторе то разобраться с 10 строками кода проблем не должно возникнуть. Хот научитесь чему-нибудь.

[zelsky]

Андрей Б.: Где здесь view-source:getbootstrap.com/dist/css/bootstrap.min.css мне искать ? Укажите пожалуйста раз так многому научились.

[Андрей Б.]

BlastPy Вы не нервничайте, держите dl3.joxi.net/drive/2017/01/27/0000/2132/47188/88/7...

[Максим Тимофеев]

BlastPy: мин версию смотреть не надо конечно. Да и сам css не нужно, нужно открыть шаблон с фиксированным хедером и в инспекторе кода посмотреть только строчки css которые действуют на хеадер и основную часть.

[zelsky]

Андрей Б.: Максим Тимофеев: Вот что мне надо бл. Потому как у меня в нутри мидл контейнера карта гугла.
margin-top: 50px;
height: -webkit-calc(100% - 132px);
height: -moz-calc(100% - 132px);
height: calc(100% - 132px);

[zelsky]

Максим Тимофеев: Андрей Б.: бл = бьіло

[Максим Тимофеев]

BlastPy: похоже на правду. Но по поводу calc - имейте в виду: caniuse.com/#search=calc