Почему вложенный div проходит мимо подвала?

Question

[beduin01]

Вот index html:

<div id="app">
			<div class="container-fluid">
				<nav class="navbar navbar-default">

					<div class="headerimg">

						<div class="container-fluid" >
							
								<div class="navbar-header" >
									<a class="navbar-brand" href="#">
										
									</a>
								</div>
							
						</div>
					</div>
					     <component :username.sync="username" :password.sync="password" :is="topMenuView"></component>
				<div>{{username}}</div>
				<div>{{password}}</div>
				</nav>
				<div class="row">
					<div class="col-md-2"><!-- .col-md-8 --></div>
					<div class="col-md-10">

							ВОТ ТУТ САМ КОНТЕНТ
					</div>
				</div>

				<div class="panel panel-default navbar-fixed-bottom">
					<div class="panel-footer">2016 (с)</div>
				</div>
			</div>

На место самого контента вставляю шаблон:

<p>SOME USER CONTENT TEST</p>
              <div id="map" class="main-map"></div>

У шаблона определены следующие свойства:

.main-map
 {
 	width: 100%; 
 	height: 100%;
 }

Проблема в том, что карта у меня почему-то куда-то мимо пролазит:


Как можно исправить? Пробовал auto ставить. Не помогает. Мне по границе футера надо.

Answer 1

[nikfakel]

<div class="panel panel-default navbar-fixed-bottom">

- getbootstrap.com/components/#navbar-fixed-bottom

забыли padding указать

Comments

[beduin01]

padding для main-map? А можно как-то чтобы размеры подвала сами получались? А то получается мне для main-map нужно каждый раз его размеры прописывать если я правильно понимаю

[beduin01]

Добавил, но вот что получилось img.ctrlv.in/img/16/06/14/576012bf9f70f.png

[nikfakel]

вам надо паддинг указать для родителя фиксированного элемента, он должен быть равен высоте фиксированного элемента

[Антон]

Вот вам два рабочих примерах:
1 - getbootstrap.com/examples/sticky-footer
2 - getbootstrap.com/examples/sticky-footer-navbar
Обратите внимание на стили, которые там применяют. (Особенно body)

[nikfakel]

Долго не мог понять, зачем ТС тыкает меня в рабочий пример, вместо того, чтобы его использовать))))))