Как создать динамический нижний колонтитул

Я прошел через столько сообщений с многих дней, но не нашел ничего полезного. Я разрабатываю веб-сайт с помощью бутстрапа. Я создал нижний колонтитул, но он работает некорректно на всех страницах, которые он входит между ними на одной или другой странице, или на какой-то странице справа оставляет место. Я также пробовал jquery, но не успел.Как создать динамический нижний колонтитул

Я хочу создать нижний колонтитул, подобный таковому в stackoverflow, который всегда остается внизу на всех страницах, и мы можем видеть его, когда прокручиваем до последнего. У меня есть нижний колонтитул на главной главной странице, а остальные страницы - дочерние и дочерние страницы.

<div class="footer navbar-fixed-bottom"> 
     <div class="container text-right"> 
      <div id="socialMedia"> 
      </div> 
     </div> 
    </div>

.css

html { 
height: 100%; 
box-sizing: border-box; 
} 

*, 
*:before, 
*:after { 
box-sizing: inherit; 
    } 

    body { 
    position: relative; 
    margin: 0; 
    padding:0; 
    min-height: 100%; 
    margin-bottom:-50px; 
    } 

    .footer { 
    position: absolute; 
    right: 0; 
    bottom:0; 
    left: 0; 
    padding:0; 
    background-color:#333; 
    width:100%; 
    height:50px; 
    margin-bottom:0px; 

}

источник

2016-01-09 Ash

Не знаю точно, что вы хотите ... Я только что создал jsfiddle с вашим кодом выше ... он работает .... https: //jsfiddle.net/3knc2wcg/ –

у вас есть два расположения столбцов в главном контейнере div? –

ya код работает, но нижний колонтитул остается фиксированным, когда мы изменяем размер ... Я хочу, чтобы нижний колонтитул, как на стеке, не был фиксированным дном, но мы можем видеть его только внизу, когда прокручиваем вниз до – Ash

Просто не сделать футер абсолютна, а относительна, как это:

.bodyContent { 
    position:relative; 
    padding:20px; 
    margin-bottom:50px; 
} 

.footer { 
    position: relative; 
    background-color:#333; 
    width:100%; 
    height:50px; 
    margin-bottom:0px; 
}

Here your code plus the fix on JSFiddle.

источник

2016-01-09 14:10:39 Baro

Это работает очень хорошо ... Но единственная проблема заключается в том, что на другой странице есть вертикальная навигационная панель, и я хочу, чтобы нижний колонтитул поднялся над ней, но она идет позади. Http://snag.gy/Ipjrk.jpg – Ash

@Ashwini Without см. код навигатора. Я больше не могу вам помочь. Если вы можете добавить навигатор к моему JSFiddle, я могу попытаться помочь вам в реальной ситуации. Навигатор - это плагин? или другим, кого я могу исследовать и проверять? – Baro

Baro, я обновил вашу скрипку, но я ее испортил. Https://jsfiddle.net/0deb5pb5/1/ – Ash

Найдены фрагменты here работает очень хорошо для начальной загрузки

Html:

<div id="wrap"> 
    <div id="main" class="container clear-top"> 
    <p>Your content here</p> 
    </div> 
</div> 
<footer class="footer"></footer>

CSS:

html, body { 
    height: 100%; 
} 

#wrap { 
    min-height: 100%; 
} 

#main { 
    overflow:auto; 
    padding-bottom:150px; /* this needs to be bigger than footer height*/ 
} 

.footer { 
    position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both; 
    padding-top:20px; 
}

Источник: Demo и Tutorial

источник

2016-01-09 14:05:50

Я пробовал все вышеперечисленные коды, но проблема в том, что у меня есть другая страница с вертикальной навигационной панелью. Я хочу, чтобы нижний колонтитул над ним, но нижний колонтитул выходит за навигацию. Смотрите это: [link] http://snag.gy/Ipjrk.jpg – Ash

@Ashwini посмотреть демо здесь [ссылка] (http://www.bootply.com/ LqphKJz221) –

harshad, спасибо, но я не хочу, чтобы этот фиксированный нижний нижний колонтитул с прокручиваемым контентом. – Ash

Как создать динамический нижний колонтитул

ответ

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