Форсирование div/изображения в нижней части экрана независимо от размера экрана

Question

EDIT 10.12am 17 апреля. «Ваш jsfiddle и эмулятор работают отлично, и, как я ожидал бы, мне не повезло. Мой HTML является

<img src="/images/mobile/m_tech_fuss.png" alt="Payco Tech logo" width="100%"> 
<div id="wrap"> 
<div id="main"> 
<div><a href="page/127/Tech-Welcome.asp"><img src="images/mobile/m_tech_welcome.png" width="100%" /></a> 
</div> 
<div><a href="page/125/Tech-Guide-to-Self-Employed-Contracts.asp"><img src="images/mobile/m_tech_self_e-contracts.png" width="100%" /></a> 
</div> 
<div><a href="page/126/Tech-The-Opt-Out-Notification-Explained.asp"><img src="images/mobile/m_tech_optout.png" width="100%" /></a> 
</div> 
</div> 
</div> 
<div id="footer"><a href="page/92/Self-Employment.asp"><img src="images/mobile/m_tech_soundsgood.png" width="100%" /></a> 
</div> 

и CSS именно так, как вы заявили, однако, не только это не перемещайте оранжевое колонтитула изображение на всех, но это также портит с моей домашней страницы макета :(

EDIT: 5:10 вечера 6 апреля

Я нашел руководство, которое, кажется, работает нормально http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

оранжевый сноска остается в нижней части на любом мобильном экране, однако есть еще некоторый разрыв между последним битом содержания и колонтитулом, который заставляет меня прокручивать делать wn, тогда как на странице, где мало контента, нижний колонтитул должен просто сидеть там уже. Кроме того, это руководство перепуталось с моими зелеными изображениями полос, которые в настоящее время ширина :(

Здесь больше нет 100% мой код:

<div id="container"> 
<div id="header"></div> 
<div id="body"> 
<div><a href="page/127/Tech-Welcome.asp"><img src="images/mobile/m_tech_welcome.png" width="100%"></a></div> 
<div><a href="page/125/Tech-Guide-to-Self-Employed-Contracts.asp"><img src="images/mobile/m_tech_self_e-contracts.png" width="100%"></a></div> 
<div><a href="page/126/Tech-The-Opt-Out-Notification-Explained.asp"><img src="images/mobile/m_tech_optout.png" width="100%"></a></div> 
</div> 
<div id="footer"><a href="page/92/Self-Employment.asp"><img src="images/mobile/m_tech_soundsgood.png" width="100%"></a></div> 
</div> 

и моего CSS

`} 
html, 
body { 
margin:0; 
padding:0; 
height:100%; 
} 
#container { 
min-height:100%; 
position:relative; 
} 
#header { 
background:#fff; 
padding:10px; 
} 
#body { 
padding:10px; 
padding-bottom:70px; /* Height of the footer */ 
} 
#footer { 
position:absolute; 
bottom:0; 
width:100%; 
height:70px; /* Height of the footer */ 
content:url("../images/mobile/m_tech_soundsgood.png"); 
} 
#container { 
height:100%; 
}` 

Answer 1

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

div#content 
{ 
    position: fixed; 
    bottom: 0px; 
} 

Чтобы заставить CSS липкий нижний колонтитул работать, у вас не может быть никакого контента вне полей #wrap или #footer, иначе он испортит вычисления высоты. Он будет толкать #wrap div, который имеет min-height100%, вниз по странице. Это означает, что нижняя часть деления #wrap ниже нижней части экрана. Результатом является ненадежное поведение. Особенно, если высота содержимого вне полей #wrap или #footer имеет переменную высоту, что и происходило в этом конкретном случае.

Вы можете поместить заголовок внутри #wrap DIV в конфигурации так же, как это:

<div id="wrap"> 
    <div id="header"> 
    <!-- Header content --> 
    </div> 
    <div id="main"> 
    <!-- Main content --> 
    </div> 
</div> 
<div id="footer"> 
    <!-- Footer content --> 
</div> 

Или вы можете оставить его за пределами DIV #wrap и #footer и компенсировать, добавив значение padding-top равное к высота заголовка на #main div. Это делается для того, чтобы остановить содержимое в пределах #main div от рендеринга поверх верхней части заголовка вне полей #wrap и #footer.