Нижний нижний колонтитул с заголовком и бутстрапом

Я использую Twitter Bootstrap 3.3.1 с шаблоном «Jumbotron».Нижний нижний колонтитул с заголовком и бутстрапом

Вот моя страница:

<body> 
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <!-- content --> 
     </div> 
    </div> 
</div> 
<div class="jumbotron"> 
    <div class="container"> 
     <!-- content --> 
    </div> 
</div> 

<div id="root" class="container"> 
    <div id="main" class="row"> 
     <section id="content"> 
      <!-- content --> 
     </section> 
    </div> 

    <footer> 
     <!-- content --> 
    </footer> 
</div>

В браузере Заголовок (ДИВ с ролью "навигацией" + сОн с классом "JumboTron") имеет 290px размера.

Когда я пытаюсь подтолкнуть нижний колонтитул снизу всем, что я нашел, у меня всегда такая же проблема. Думаю, что «корень» и «главный» div всегда будут длиннее экрана, потому что из-за заголовка. Многие интернет-решения не включают заголовок ... :(

Я не хочу фиксировать нижний колонтитул с «позицией: исправлено», я действительно хочу нажать его внизу с помощью CSS только .

Чтобы быть более конкретным, мой нижний колонтитул должен находиться внизу страницы с содержимым или без него. Если контент сортирует, чем экран, нижний колонтитул будет внизу экрана. дольше, чем экран, нижний колонтитул будет в конце страницы.

EDIT: Я не хочу делать это с помощью Bootstrap. Я просто хочу, чтобы какой-то CSS выполнял это без Bootstrap, если Bootstrap не может сделать это

Надеюсь, это достаточно ясно.

Если у кого-то есть идея, это сделает мой день!

Спасибо.

источник

2014-12-04 Massprotect

Не могли бы вы показать нам css и любой другой код, если у вас есть? – NatureShade

[Bootply] (http://www.bootply.com/HFkVO26ljV) В этом примере есть фиксированная нижняя панель навигации, но я не знаю, что вы просите в этой ситуации ... –

@NatureShade: для этого случая , У меня нет больше материала, кроме Bootstrap. – Massprotect

-2

Так что вы хотите сохранить колонтитула в нижней части страницы с помощью CSS, вы можете просто сделать:

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 100px; /* bottom = footer height */ 
} 
footer { 
    position: absolute; 
    bottom: 0; 
}

источник

2014-12-04 19:59:05 NatureShade

Не работает, когда контент длиннее страницы! :( – Massprotect

@Massprotect: http://mystrd.at/modern-clean-css-sticky-footer/ – NatureShade

Это необязательно в начальной загрузке. –

В загрузчике можно укладывать нижний колонтитулы с классом

navbar-fixed-bottom

Нижний колонтитул по умолчанию может выглядеть примерно так:

<nav class="navbar navbar-default navbar-static-bottom" role="navigation"> 
    <div class="container"> 
    ... 
    </div> 
</nav>

источник

2014-12-04 20:06:45

Это все еще говорит 'navbar-static-top' и нет' navbar-static-bottom' .. Я думаю, вы имеете в виду 'navbar- fixed-bottom' –

Так оно и есть. Теперь он говорит внизу. –

Нижний колонтитул будет закреплен внизу. Я просто хочу, чтобы нижний колонтитул был «толчком» в конце страницы. Спасибо за помощь! – Massprotect

Вы изучили эти примеры?

http://getbootstrap.com/examples/sticky-footer/

или

http://getbootstrap.com/examples/sticky-footer-navbar/

источник

2014-12-04 20:06:49

Да! Уже проверить это и не работать ... – Massprotect

Bootply Example

Пробовали ли вы это?

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <!-- content --> 
    </div> 
    </div> 
</div> 
<div class="jumbotron"> 
    <div class="container"> 
    <!-- content --> 
    </div> 
</div> 

<div id="root" class="container"> 
    <div id="main" class="row"> 
    <section id="content"> 
     <!-- content --> 
    </section> 
    </div> 

    <footer> 
    <div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <!-- content --> 
     </div> 
     </div> 
    </div> 
    </footer> 
</div>

Кроме того, если это не то, что вы ищете, отредактируйте ваш вопрос и постарайтесь быть более подробным.

EDIT

OP ищет navbar-static-bottom, оказывающий колонтитул в самом низу страницы НЕЗАВИСИМО * страница контента/высоту. Единственная проблема: этот класс еще не добавлен в bootstrap. Он находится в списке коммитов, но еще не надежно реализован.

Commit Log for Bootstrap

См этот документ о состоянии navbar-static-bottom класса. На данный момент в Bootstrap нет надежного способа сделать это.

источник

2014-12-04 20:07:41

«просто используйте навигационную панель по умолчанию, если вы это делаете». Это не необходимое исправление. Это люди неправильно используют фреймворк bootstrap. Ваше решение работает. –

Мое решение работает только в том случае, если содержимое не прокручивается мимо страницы ... Как только это произойдет, навигационная панель 'fixed-bottom' ** OVERLAPS ** находится в нижней части страницы. Он буквально закреплен на нижней части экрана, а не на нижней части страницы. –

@TimLewis Oh right ... Нет решения с boostrap напрямую ... Спасибо, хорошо знать! Есть ли способ сделать это с помощью пользовательского CSS? – Massprotect

Это моя любимая:

http://www.cssstickyfooter.com/

Это работает как шарм в течение многих лет.

Надеюсь, это поможет!

источник

2015-07-09 05:48:32

Нижний нижний колонтитул с заголовком и бутстрапом

ответ

Смежные вопросы