1

Это не дубликат вопроса «Как всегда прижимать footer к низу экрана?». Там подвал прикрепляется безусловно. Мне же необходимо прикрепление только если страница не помещается по вертикали на экан.

Как сверстать <footer>, удовлетворяющих описанный ниже условиям?

  1. В соответсвии с принципом резиновой вёрстки, его ширина всегда равна ширине окна (Это условие исключает позиционирование).
  2. Если высота окна больше высоты содержимого, то футер прижат к низу окна, образуя пробел с основным содержимым (это смотрится лучше, чем пробел после футера).
  3. Если высота окна меньше высоты содержимого, то вертикальный скроллинг оканчивается на футере.

Чтобы съэкономить Ваше время, я сделал простую заготовку на jsfiddle.

<header></header>
<main>Если ничего не ввести, то не отображается даже при заданной высоте. </main>
<footer></footer>

header{
  height: 50px;
  width: 100%;
  background: #F5A9A9;
}

main{
  //display: block; // Кроссбраузерность для IE
  height: 150px;
  width: 100%;
  background: #F5F6CE;
}

footer{
  height: 50px;
  width: 100%;
  background: #E0F8E6;
}
Дух сообщества
  • 1
Боков Глеб
  • 1,116
  • 2
  • 25
  • 70

1 Answers1

2

cамый простой способ, без js

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html,body{
    height:100%;
    min-height:;
}
header,footer{
    display:block;
    width:100%;
    height:120px;
    background: lightgreen;
    padding:10px 20px;
}

.wrapper{
    min-height:100%;
    position: relative;
    background:#eee;
}
.content{
    padding-bottom:120px;
}
.content p{
    display:block;
    width:80%;
    margin:30px auto;
    background: #ddeedd;
    padding:20px;
    text-align: justify;
    border-radius: 10px;
}
footer{
    position:absolute;
    bottom:0;
    left:0;
}
<div class="wrapper"> 
<header>
  <h3>header</h3>
</header>
<div class="content"></div>
<footer>
  <p>Copyright 2016 </p>
</footer>
</div>
  • demo : https://jsfiddle.net/atlanta/md3f0yyf/1/ –  Jul 15 '16 at 03:06
  • Благодарю Вас за решение! Похоже, я не совсем корректро сказал про позиционирование в вопросе: резиновый эффект длины 100% отменяет только горизонтальное позиционирование, так? – Боков Глеб Jul 15 '16 at 04:16
  • вообще можно абсолютно всё разместить так как требуется по замыслу , главное понять что требуется , для расширения html был придуман js_framework -- angular , и с этим дополнением вообще можно сделать всё _ ВСЁ –  Jul 15 '16 at 05:39
  • Как Вы знаете, в профессиональной вёрстке важно не только точное соответствие дезайну, но и достижение этого соотсветствия минимальными средствами и максимально упрощённой разметкой. Средств действительно много, но их использование наверняка "бесплатно" не даётся (снижение скорости загрузки, проблемы с кроссбраузерностью и т. д.). – Боков Глеб Jul 15 '16 at 05:45
  • Gurebu Bokofu Это вы кому сказали ? –  Jul 15 '16 at 06:04
  • Вам, но с расчётом на то, что это прочтут другие новички, так то, что я сказил, Вы знаете. – Боков Глеб Jul 15 '16 at 06:58
  • вы не попутали ? кто новичёк то ? лесом шли бы - сенсей , проверьте это в любом браузере и мобильном устройстве –  Jul 15 '16 at 09:06
  • Вы меня не правильно поняли. Когда я говорил "другие новички", под новичком из нас двоих имел ввиду себя, а не Вас. – Боков Глеб Jul 15 '16 at 09:47
  • Gurebu Bokofu извени –  Jul 15 '16 at 09:49
  • Ещё раз благодарю Вас за решении моей задачи. Удачного дня! ^_^ – Боков Глеб Jul 15 '16 at 11:49