I make a topic for the site.

The first question is how to stretch the sidebar to the footer, regardless of the amount of content on the page?

The second question is why on the pages of articles does the picture go under the sidebar?

The third question is how to make the footer fit to the height of the content and stick to the bottom of the screen?

Thanks in advance for your help!

  • I really need help, I tried all the options ... - spoilt
  • A good title * in the form of a question, for example: "How to ask?"; * clear, clear, concise, understandable and informative; * without words like "help, advise, tell me, please, hello." - etki

2 answers 2

  1. http://www.getincss.ru/2009/07/11/4-sposoba-kak-sozdat-bloki-kolonki-odinakovoj-vysoty/
  2. This you, apparently, already fixed.

  3. http://grigoriev.pw/articles/pure-sticky-footer/ , and to adapt, write this:

    var footer_height = $ ('. footer'). height ();

    $ ('body'). css ('margin-bottom', footer_height);

    $ ('. footer'). css ('height', footer_height);

Something like this. )

  • @Pavel_G Thank you, I will try! - spoilt
  • @Pavel_G this code does not do what I need. - spoilt

Here is the solution to the third question:

html { height: 100%; /* Растягиваем документ на всю высоту окна */ } body { position: relative; min-height: 100%; /* Растягиваем body по высоте html */ } main { padding-bottom: 30px; /* Выставляем отступ с высотой footer */ } footer { position: absolute; /* Позиционируем footer внизу main */ bottom: 0; width: 100%; height: 30px; /* Высота footer */ } 
 <body> <header> header </header> <main> main </main> <footer> footer </footer> </body>