Фиксированное положение не работает

Ответ 1

вам нужно явно указать ширину в верхнем и нижнем колонтитуле

width: 100%;

Рабочая скрипка

Если вы хотите, чтобы средняя часть не была скрыта, дайте position: absolute;width: 100%; и установите для нее свойства top and bottom (связанные с высотами заголовка и нижнего колонтитула) и укажите родительский элемент position: relative. (конечно, удалите height: 700px;.) и сделайте его прокручиваемым, дайте overflow: auto.

Ответ 2

Дважды проверьте, что вы не включили backface-visibility для любого из содержащихся элементов, так как это приведет к повреждению position: fixed. Для меня я использовал библиотеку анимации CSS3...

Ответ 3

Рабочая jsFiddle Демо

Когда вы работаете с fixed или absolute значениями, рекомендуется установить свойства top или bottom и left или right (или их комбинацию).

Также не устанавливайте height main элемента (пусть браузер устанавливает высоту его с настройкой свойств top и bottom).

.header{
    position: fixed;
    background-color: #f00;
    height: 100px;
    top: 0;
    left: 0;
    right: 0;
}
.main{
    background-color: #ff0;
    position: fixed;
    bottom: 120px;
    left: 0;
    right: 0;
    top: 100px;
    overflow: auto;
}
.footer{
    position: fixed;
    bottom: 0;
    background-color: #f0f;
    height: 120px;
    bottom: 0;
    left: 0;
    right: 0;
}

Ответ 4

Моя проблема заключалась в том, что родительский элемент имел transform: scale(1); по-видимому, это делает невозможным fixed какого-либо элемента внутри него. Убрав что все работает нормально...

Похоже, что так происходит во всех протестированных мною браузерах (Chrome, Safari), поэтому не знаю, исходит ли это от какого-то странного веб-стандарта.

(Это всплывающее окно, которое переходит от scale(0) к scale(1))

Ответ 5

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

http://jsfiddle.net/BrmGr/12/

.header{
position: fixed;
background-color: #f00;
height: 100px;
    width:100%;
}
.main{
background-color: #ff0;
    padding-top: 100px;
    padding-bottom: 120px;
}
.footer{
position: fixed;
bottom: 0;
background-color: #f0f;
height: 120px;
    width:100%;}

Ответ 6

У вас нет установленной ширины, и в div нет содержимого. Другое заключается в том, что способ html работает... когда все три фиксированные, заключается в том, что иерархия идет снизу вверх... так что контент находится поверх заголовка, так как они оба фиксированы... так что в этом случае вам нужно объявить z-index в заголовке... но я бы этого не делал... оставим один родственник, чтобы он мог нормально прокручиваться.

Сначала перейдите к мобильному... FIDDLE ЗДЕСЬ

HTML

<header class="global-header">HEADER</header>

<section class="main-content">CONTENT</section>

<footer class="global-footer">FOOTER</footer>

CSS   html, body {       заполнение: 0; margin: 0;       высота: 100%;   }

.global-header {
    width: 100%;
    float: left;
    min-height: 5em;
    background-color: red;
}

.main-content {
    width: 100%;
    float: left;
    height: 50em;
    background-color: yellow;
}

.global-footer {
    width: 100%;
    float: left;
    min-height: 5em;
    background-color: lightblue;
}

@media (min-width: 30em) {

    .global-header {
        position: fixed;
        top: 0;
        left: 0;
    }

    .main-content {
        height: 100%;
        margin-top: 5em; /* to offset header */
    }

    .global-footer {
        position: fixed;
        bottom: 0;
        left: 0;
    }

} /* ================== */

Ответ 7

Вы забыли добавить ширину двух div.

.header {
    position: fixed;
    top:0;
    background-color: #f00;
    height: 100px; width: 100%;
}
.footer {
    position: fixed;
    bottom: 0;
    background-color: #f0f;
    height: 120px; width:100%;
}

демо

Ответ 8

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

Только IE7 + понимает "положение: исправлено".

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Так что вам не повезло для IE6. Чтобы получить нижний колонтитул, выполните следующие действия:

.main {
  min-height: 100%;
  margin-bottom: -60px;
}
.footer {
  height: 60px;
}

Вы также можете использовать iFrame.

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

В философской заметке я бы предпочел указать пользователям IE6 на http://browsehappy.com/ и потратить время на то, чтобы сохранить взломать IE6 на что-то еще.

Ответ 9

Это может быть старая тема, но в моем случае это было layout значение CSS contain свойство родительского элемента, который вызывает проблему. Я использую рамки для гибридных мобильных, которые используют это contain свойство в большинстве своего компонента.

Например:

.parentEl {
    contain: size style layout;
}
.parentEl .childEl {
    position: fixed;
    top: 0;
    left: 0;
}

Просто удалите layout значение contain свойства и неподвижное содержание должно работать!

.parentEl {
    contain: size style;
}

Ответ 10

У меня была похожая проблема, вызванная добавлением значения CSS для перспективы в теле CSS

body { perspective: 1200px; }

убитый

#mainNav { position: fixed; }