Создайте нижний колонтитул в нижней части страницы и закрепите навигацию вверху - PullRequest
Новая
       22

Создайте нижний колонтитул в нижней части страницы и закрепите навигацию вверху

1 голос
/ 15 января 2012

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

Макет выглядит так: 

<header class="navbar navbar-fixed">
</header>
<div class="content">
  <div class="container">
  </div>
  <div class="clearfooter"></div>
</div>
<footer>
</footer>

А вот CSS: 

html, body {
  height: 100%;
}

body {
  padding-top: 40px; /* height of the navbar */
}

.navbar-fixed {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
}

.content {
  margin-bottom: -30px;
  min-height: 100%;
  position: relative;
}

.clearfooter {
  clear: both;
  height: 30px;
}

#footer {
  height: 30px;
  position: relative;
}

Я попробовал этот учебник .Но нижний колонтитул не прикреплен к нижней части окна, он находится ниже (больше не в области просмотра).Я уже пытался исправить это с помощью дополнительного отступа / отступа, но ничего не получалось: (

Ответы [ 2 ]

2 голосов
/ 16 января 2012

Вместо добавления отступа к телу, чтобы выдвинуть вашу страницу, просто создайте push div, чтобы добавить пространство между вашим фиксированным заголовком и вашим контентом, например:

HTML 

<div class="push">&nbsp;</div>

CSS 

.push { height:40px; }

.push:before, .push:after {
  display: table;
  content: "";
  zoom: 1;
}

.push:after {
  clear: both;
}

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

http://jsfiddle.net/andresilich/fVpp2/1/show/

Редактировать здесь http://jsfiddle.net/andresilich/fVpp2/1/

Примечание: добавлен ряд линий разрыва, чтобы проиллюстрировать расположение нижнего колонтитула.

(правка: jsfiddle сократил мой CSS, добавил его обратно.)

0 голосов
/ 15 января 2012

Я провел эксперимент, и он сработал, вот HTML: 

<body>
    <div class="wrapper">
        <div class="header">
        </div>
        <div class="contain">
        </div>
        <div class="footer">
        </div>
    </div>
</body>

и css: 

.header {
        height: 100px;
        background-color: red;
    }

    .contain {
        height:1500px;
        background-color: black;
    }

    .wrapper {
        width: 960px;
        background-color: yellow;
        margin: 0 auto;
    }
    body {
        margin: 0;
    }

    .footer {
        height: 200px;
        background-color: blue;
    }

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

...