Нижний нижний колонтитул не находится внизу

-1

Я прочитал много статей и существующих вопросов о stackoverflow. Я пробовал более 10 различных частей кода. Это просто не работает.Нижний нижний колонтитул не находится внизу

У меня есть сайт, и я бы хотел, чтобы нижний колонтитул встал на дно, несмотря ни на что. Я имею в виду, litteraly stick на дне. Я не хочу, чтобы он перемещался с высотой окна браузера. Я хочу, чтобы он оставался ниже всех существующих div.

В данный момент нижний колонтитул находится внизу страницы. Но он перемещается с высотой окна моего браузера. Итак, если я скрою свой браузер, нижний колонтитул будет двигаться вверх с высотой браузера. Мне этого не надо.

Я пробовал много, но это не работает. Это мой текущий код:

body{ 
background-image: url('../images/bg.png'); 
background-repeat: repeat; 
margin: 0px; 
padding: 0px; 
} 

body, html{ 
    height: 100%; 
} 

#body{ 
width: 1024px; 
min-height: 100%; 
margin: 0 auto; 
} 

#footer{ 
clear:both; 
min-height: 150px; 
width: 100%; 
background-image: url('../images/footerbg.png'); 
background-repeat: repeat; 
}

Идентификатор кузова - это обертка. Сноска находится вне оболочки тела

<body> 
    <div id="body"> 
     <!-- HEADER --> 
     <div id="logo"></div> 
     <div id="menu"> 
      <ul id="hmenu"> 
      <!-- stuff --> 
      </ul> 
     </div> 

     <div id="page"> 
      <!-- stuff --> 
     </div> 
    </div> 

    <div id="footer"> 
    <!-- stuff --> 
    </div> 

    <div id="navigationbar"></div> 



    </body>

Edit: проблема связана с одним из дивы внутри «тела» дел. Он позиционируется с использованием абсолютного положения. Есть ли способ получить верхний нижний колонтитул, используя метод Райана Файта, используя абсолютную позицию?

Редактировать # 2: Я забыл использовать «clear: both». Решено это

источник

2014-09-23 stefan1294

Вы должны будете объяснить, почему это «не ответ», поскольку он, кажется, точно отвечает на ваш вопрос. –

Оба принятых ответа (тот, который задан на этот вопрос и тот, который указан выше) совпадают. Как это не могло быть дубликатом? Пожалуйста, дополните. –

@HashemQolami Nevermind. Даже после моего редактирования я согласен с вами. Должно было сделать еще несколько исследований. – stefan1294

Райан свершившимся имеет решение этой проблемы: http://ryanfait.com/sticky-footer/

Я ее немного модифицировал с помощью SASS:

$footer-height: 250px; /* Set size of sticky footer in the variable: */ 

.main-wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto (-$footer-height); /* the bottom margin is the negative value of the footer's height */ 
} 
.push { 
    clear: both; 
    height: $footer-height; 
} 
.footer-wrapper { 
    clear: both; 
    min-height: $footer-height; 
    background: #E7E7E7; 
    padding: 50px 0; 
}

Вы можете взять эту переменную для использования с ванильным CSS.

Ваш HTML будет выглядеть примерно так:

<div class="main-wrapper"> 
    <div class="wrapper"></div> 
    <div class="push"></div> 
</div> 
<div class="footer-wrapper"></div>

источник

2014-09-23 15:45:55

Это лучшее решение, которое я использовал очень часто, но это не от Ryan fait ^^. Так или иначе. –

+1 для решения Ryan Fait, это действительно хорошо. – Candlejack

@StevenWave Извините, я знаю это только как работу Райана Файта, если бы вы могли предоставить мне оригинальный автор, я был бы рад обновить ссылку на происхождение кода :-) –

Закрепить DIV в браузер, а затем заставить его иметь 0 запас на дне и слева.

#footer{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    clear:both; 
    min-height: 150px; 
    width: 100%; 
    background-image: url('../images/footerbg.png'); 
    background-repeat: repeat; 
}

Если вы хотите DIV в середине нижней части, создать контейнер с шириной: 100%, а затем уже футер содержит «запас: 0 авто»

источник

2014-09-23 15:46:28 oliversarfas

Я думаю, вы должны использовать этот CSS для нижнего колонтитула:

#footer{ 
    position:fixed; 
    bottom:0; 
    background-image: url('../images/footerbg.png'); 
    background-repeat: repeat; 
}

here.

источник

2014-09-23 15:46:50

Все, что вам нужно:

#footer{ 
    position: fixed; 
    bottom: 0; 
    /* rest of your styles */ 
}

Кроме того, если вы не хотите, чтобы содержание быть скрыты за сноске:

#body { /* your main div has an id of body, not to be mistaken for body tag */ 
    padding-bottom: 150px /* height of footer */ 
}

Демоhttp://jsfiddle.net/2mzak87o/

источник

2014-09-23 15:47:25 Arbel

попробовать это:

#body { 
width: 1024px; 
min-height: 80%; 
margin: 0 auto; 
position: relative; 
} 

#footer { 
clear: both; 
min-height: 20%; 
width: 100%; 
background-image: url('../images/footerbg.png'); 
background-repeat: repeat; 
}

enter image description here

источник

2014-09-23 15:51:51

Нижний нижний колонтитул не находится внизу

ответ

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