This question has already been answered:

This is not a duplicate of the question “ How to always press footer to the bottom of the screen? ". There the basement is attached unconditionally. I also need to attach only if the page does not fit vertically on the ekan.

How to make up <footer> satisfying the conditions described below?

  1. In accordance with the principle of rubber layout, its width is always equal to the width of the window (This condition excludes positioning).
  2. If the height of the window is greater than the height of the content, then the footer is pressed to the bottom of the window, forming a space with the main content (it looks better than the space after the footer).
  3. If the height of the window is less than the height of the content, then the vertical scrolling ends on the footer.

To save you time, I did a simple jsfiddle template .

 <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; }

Reported as a duplicate by AK ♦ members, Community Spirit ♦ Feb 8 '17 at 8:18 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

1 answer 1

The easiest way, without 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: jsfiddle.net/atlanta/md3f0yyf/1 - user33274
  • Thank you for your decision! It seems that I did not quite correctly said about the positioning in the question: the rubber effect of length 100% cancels only horizontal positioning, right? - Hokov Gleb
  • in general, everything can be placed as required by design, the main thing is to understand what is required, js_framework - angular was invented for html extension, and with this addition you can do everything _ ALL - user33274
  • As you know, in a professional layout, it is important not only to accurately match the design, but also to achieve this correspondence with minimal means and as much as possible simplified markup. There are really a lot of tools, but their use is certainly not “free” (reduction in download speed, problems with cross-browser compatibility, etc.). - Bokov Gleb
  • Gurebu Bokofu Who did you say that to? - user33274