2014-12-10 5 views
-1

CSS:Footer отрезаны на нижней части страницы

html, 
body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    background-color: #E6E6E6; 
} 
#header { 
    background-color: black; 
    width: 100%; 
    margin-top: 50px; 
    margin-bottom: 50px; 
} 
#content { 
    padding-bottom: 80px; 
    text-align: center; 
} 
#footer { 
    width: 100%; 
    height: 80px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background-color: black; 
    color: #898989; 
} 

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

без прокрутки: http://i.imgur.com/lKH5Byc.png

С прокруткой: http://i.imgur.com/GrGKpzm.png

Я не знаю, что я здесь отсутствует, она просто не работает.

EDIT: Поэтому я знаю, что это был ужасный вопрос, я оставил много вещей, потому что это веб-сайт компании, и меня просто беспокоило то, что я включил. Преступник оказался маркой на элементе #header. Удаление всех заставило все работать как шарм.

+0

Попробуйте создать [JSFiddle] (http://jsfiddle.net/), чтобы мы могли видеть фактическую сломанную версию. – leigero

+0

Не видя кода HTML, я думаю, что проблема в том, что элементы внутри нижнего колонтитула выше вашего предопределенного 80px. – Eyal

ответ

-1

я изменил только нижняя часть

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background-color: #E6E6E6; 
 
} 
 
#header { 
 
    background-color: black; 
 
    width: 100%; 
 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
} 
 
#content { 
 
    padding-bottom: 80px; 
 
    text-align: center; 
 
} 
 
#footer { 
 
    width: 100%; 
 
    height: 80px; 
 
    position: absolute; 
 
    bottom: -100px; 
 
    left: 0; 
 
    background-color: black; 
 
    color: #898989; 
 
}
<div id="header"> 
 
. 
 
</div> 
 
<div id="content"> 
 
. 
 
</div> 
 
<div id="footer"> 
 
. 
 
</div>
делает эту помощь?

0

Так что я знаю, что это был страшный вопрос, я оставил много вещей, потому что это веб-сайт компании, и меня просто беспокоило то, что я включил. Преступник оказался маркой на элементе #header. Удаление всех заставило все работать как шарм.

+0

Но вы всегда можете сохранить свой оригинальный вопрос и использовать позиционирование, чтобы разместить границу тоже – skv

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