Нижний колонтитул неправильно отображается на разных высотах устройства

У меня проблема с нижним колонтитулом. У меня есть страница с некоторым контентом и на некоторых устройствах (например, в увеличенном виде на мобильных устройствах) содержимое моей страницы не заполняет высоту родительского устройства на некоторых устройствах. Нижний колонтитул создает проблему с этими разными высотами. Когда содержимое не заполняет высоту родительского устройства, нижний колонтитул отображается в нижней части страницы, но когда содержимое заполняет высоту и переполнение родительского устройства, нижний колонтитул отображается над содержимым. Возможно, я не могу понять английский, но эти снимки экрана сделают вас понятными.Нижний колонтитул неправильно отображается на разных высотах устройства

нижнего колонтитул с содержанием не заполняя высоту родителя (показывая правильно)

Footer with content not filling Parent height(showing correctly)

колонтитула с переполненным содержанием (нижний колонтитул не показан правильно)

enter image description here

Качество изображения не то, что понятно но все же это видно.

Это код CSS, который я использовал до сих пор.

#footer{ 
    display:block; 
    margin-right:auto; 
    margin-left:auto; 
    position:absolute; 
    bottom:0; 
    height:100px; 
    width: 60%; 
    text-align:center; 
    color:green; 
    font-size:18px; 
    font-family:Times; 
}

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

источник

2013-08-09 ashu

на вашем #main элемента перед колонтитула (если вы используете id="main" для элемента с зеленой границы, сделайте следующее:

#main { 
    margin-bottom: 100px; 
}

EDIT:

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="main"></div> 
    <div id="footer"></div> 
</div> 

#wrapper { 
    position: relative; 
    padding-bottom: 110px; 
}

источник

2013-08-09 19:24:13

Я уже пробовал, ничего не произошло. – ashu

Я отредактировал свой комментарий. Можете ли вы подражать этой структуре HTML (см. Скрипту: http://jsfiddle.net/ryanwheale/5LSQ4/) –

Это сработало, но это дало лишнее пустое пространство между контентом и нижним колонтитулом, когда содержимое переполнено – ashu

Когда вы позиционируете что-то абсолютное, вы берете его за пределами DOM, то есть в этом случае он сидит внизу 0 (на основе вашего css) до ближайшего относительно позиционированного элемента. Я помещал html нижнего колонтитула после вашего обертывания или блока содержимого и просто сосредоточил его, сказав

margin 0 auto;

источник

2013-08-09 19:24:21

Если вам нужно, чтобы нижний колонтитул был абсолютно позиционирован, вы всегда можете добавить нижнее или нижнее основание к элементу кузова. Просто сделайте это 100px вашего абсолютно позиционированного элемента, и он должен заставить контент над вашим позиционированным элементом.

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

источник

2013-08-09 19:31:11 user2658774

Нижний колонтитул неправильно отображается на разных высотах устройства

ответ

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