Задать вопрос
@DennyD314
html

Как совместить футер и min-height = 100%, используя стандартный container bootstrap?

Всем привет!
Я использую bootstrap. В стандартный контейнер кладу навигацию, контент и футер.
Цель заключается в том, чтобы получить страницу с отступами справа и слева, откуда будет выглядывать паттерн, а сама страница будет обладать минимальной высотой в размер экрана и прижатым футером. Не хотелось бы использовать vh и тем более считать высоту используя jquery. В принципе решение с jquery есть , но хотелось бы сделать все покрасивее. Уже сутки ломаю голову, постоянно что-то уезжает, то футер по середине экрана при длинной странице, то блок с контентом обрезается по контенту вместо того чтобы опуститься вниз..
Собственно код. Вариант, когда футер при длинной странице висит посередине:
<body>
<div id="center" class="container" >
            <nav role="navigation" class="navbar navbar-default navbar-inverse "> </nav>
            <div class="content"></div>
            <div class="footer">
                <p> Powered by DJANGO 1.10.3 </p>
            </div>
</div>


CSS:
body, html {min-height: 100%;height: 100% ;}

html {
  position: relative;
  overflow-y: scroll;
}


body {
font-family: "PT Sans";
background: #FFFFFF;
color: #2F4F4F;
font-size: 150%;
background: url("../images/foggy_birds.png") repeat;
}


#center {
    padding-left: 0;
    padding-right: 0;
    background: #FFFFFF;
    min-height: 100%
}


.footer {
  position: absolute;
  bottom: -100px;
  height: 60px;
  background-color: rgba(112, 128, 144, 0.1);
  color: #999999;
width: inherit;
}

.content{
    padding-left: 16px;
    padding-right: 16px;
}
  • Вопрос задан
  • 960 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
@DennyD314 Автор вопроса
Решено таким образом:
<html>
<head></head>
<body>
<div id="center" class="container" >
    <nav role="navigation" class="navbar navbar-default navbar-inverse "></nav>
    <div class="content">
        <div style="clear:both;"></div>
     </div>
    <footer><p class="text-center">Powered by DJANGO 1.10.3</p></footer>


html,
body,
#center {
  height: 100%;
}


html {
  min-height: 100%;
  overflow-y: scroll;
}



body {
font-family: "PT Sans";
background: #FFFFFF;
color: #2F4F4F;
font-size: 150%;
background: url("../images/foggy_birds.png") repeat;
min-height: 100%;
}


#center {
    padding-left: 0;
    padding-right: 0;
    background: #FFFFFF;
    position: relative;
}


.content{
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
  min-height: 100%;
  height: auto;
  padding-bottom: 90px;
  background: inherit;
}


footer {
  height: 80px;
  margin-top: -80px;
  background-color: #1b6d85;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Вариант - переходить на html5 с тэгом footer, который спокойно себе лежит внизу страницы.

Или #content { position: relative }
а футеру bottom: 0px

И убрать страшный relative для html )
Ответ написан
7 комментариев
7 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Верстальщик / фронтендер для браузерного расширения
DevTeam.Space
от 1 000 до 2 000 $
Специалист технической поддержки (чат)
WebSoft
от 50 000 до 70 000 ₽
Web-разработчик
ЭНДИ Консалтинг
от 40 000 до 40 000 ₽
Ещё вакансии