Html Css Footer на мобильном сайте

Question

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

здесь код, любая помощь будет оценена:

CSS

#fcontain{ 
    width:100%; 
    background:white; 
    opacity:0.9; 
    left:-0%; 
    margin-top:6%; 
    padding-left:30%; 
    position: absolute; 
} 
#footer .column { 
width: 100%; 
opacity: 1; 
} 
#footer .column div{ 
margin: 1%; 
height: 100%; 
background: white; 
opacity: 0.8; 
width: 20%; 
float: left; 
position:static; 
} 

HTML

<div id="fcontain"> 
<div id="footer"> 
    <div class="column"> 
     <div><img style="width:{{ settings.home_image_f }}px" src="{{ 'home_image_w.jpg' | asset_url }}" alt="{{ shop.name | escape }}" /></div> 
     <div><img style="width:{{ settings.home_image_f }}px" src="{{ 'home_image_w.jpg' | asset_url }}" alt="{{ shop.name | escape }}" /></div> 
     <div><img style="width:{{ settings.home_image_f }}px" src="{{ 'home_image_w.jpg' | asset_url }}" alt="{{ shop.name | escape }}" /></div> 
    </div> 
</div> 

Answer 1

Не используйте pisition:absolute на контейнере. Нижний колонтитул должен находиться в конце вашего HTML-файла, и этого будет достаточно.

Общие замечания:

1. Я считаю, вы должны удалить fcontain. нижний колонтитул достаточно.
2. Использование <footer> вместо <div id="footer">

Answer 2

Если вы хотите колонтитулы всегда в нижней части экрана, вы должны использовать position: fixed; вместо position: absolute;.

#fcontain { 
    position: fixed; 
    bottom: 0; 
} 

http://jsfiddle.net/b4vsLsjb/

Answer 3

Вы хотите футер всегда быть на дне, не так ли? Попробуйте bottom: 0% или bottom: 0px.

Сообщите мне, если это сработало!