The site has header, content and footer blocks. Content has different height on different pages, it happens that the height is less than the body and then the header is not at the bottom of the page but above. How to position the footer? Do I need to set the minimum height for content to press the footer to the bottom? Although I can not set the minimum height, since the height on different devices is different. What to do in such cases?

3 answers 3

the footer is pressed down by its absolute positioning and stretching the height of the parent blocks: html, body and the block with the class .wrapper by 100%. In this case, a specific .content block must be set to a lower indent, which is equal to or greater than the height of the footer, otherwise the latter will close part of the contents.

* { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { position: relative; min-height: 100%; } .content { padding-bottom: 90px; } .footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; } Разметка <html> <body> <div class="wrapper"> <div class="content"> <p>Text</p> </div> <div class="footer">Text footer</div> </div> </body> </html>

Something like this

  • I sometimes use this method here, but it only works in modern browsers * { margin: 0; padding: 0; } .content { min-height: calc(100vh - 80px); } * { margin: 0; padding: 0; } .content { min-height: calc(100vh - 80px); } * { margin: 0; padding: 0; } .content { min-height: calc(100vh - 80px); } but here you need to know the exact height of the footer - ChromeChrome
  • Thanks, apparently the first method is preferred, since it works in more browsers. position: relative; for the wrapper, why do you need? And I'm also interested in why exactly absolute is used for the footer? It is clear that it is necessary to make a countdown from the bottom edge of the genus. block, but at the same time other elements are displayed on the web page as if absolutely positioned element and no. Does it interfere? This means that the block seems to go over the content and the rest of the elements would be below it, if not for the padding of the content? - GuitarFan

I use this method:

 <html class="with-sticky-footer"> <head> </head> <body> <div class="body-before-footer"> <!-- Ваш основной контент --> </div> <footer> <!-- Контент футера --> </footer> </body> </html>

Class with-sticky-footer - in order not to overload the standard html and body styles, since the footer may not be found on all pages of the site.

Styles:

 html.with-sticky-footer { height: auto; min-height: 100%; position: relative; } html.with-sticky-footer body { height: auto; margin-bottom: 100px; position: initial; } html.with-sticky-footer .body-before-footer { background: #fff; } html.with-sticky-footer footer { bottom: 0; height: 100px; min-width: 100%; position: absolute; }

Color background: #fff; .body-before-footer is set the same as body . It helps if you want to position the footer fixedly and, as it were, “under” the content. See how it is implemented here: http://rubycourses.ru/ . I just set the color for .body-before-footer and position: fixed for the footer.

  • Regarding your example: Why does the html position: relative, the body position: initial? And actually footer absolute? As far as I know with absolute positioning, all HTML elements behave as if there is no absolutely positioned element in the stream. That is, the footer will be, as it were, separate from all elements, possibly over them. It is also not clear why the footer min-width: 100%; - GuitarFan

What you want to do is called a sticky footer. There are many ways to implement this behavior.

1. Negative margin at footer

html

 <body> <div class="content"> <div class="content-inside"> content </div> </div> <footer class="footer"></footer> </body>

css

 html, body { height: 100%; margin: 0; } .content { min-height: 100%; } .content-inside { padding: 20px; padding-bottom: 50px; } .footer { height: 50px; margin-top: -50px; }

2. Negative margin for content

html

 <body> <div class="wrapper"> content <div class="push"></div> </div> <footer class="footer"></footer> </body>

css

 html, body { height: 100%; margin: 0; } .wrapper { min-height: 100%; margin-bottom: -50px; } .footer, .push { height: 50px; }

3. Using calc ()

html

 <body> <div class="content"> content </div> <footer class="footer"></footer> </body>

css

 .content { min-height: calc(100vh - 70px); } .footer { height: 50px; }

4. Through the flexbox property

html

 <body> <div class="content"> content </div> <footer class="footer"></footer> </body>

css

 html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } .content { flex: 1; }

5. Through the grid property

html

 <body> <div class="content"> content </div> <footer class="footer"></footer> </body>

css

 html { height: 100%; } body { min-height: 100%; display: grid; grid-template-rows: 1fr auto; } .footer { grid-row-start: 2; grid-row-end: 3; }
  • one
    Which of these methods do you use? Which is more versatile for most browsers? - GuitarFan
  • The most modern and easy way is 4. flexbox. But, like everything new, it is not supported by the old webref.ru/css/flex browsers. In projects that do not require broad browser support, I use it. The most universal and cross-browser methods 1 and 2, through negative margin. - Alexey Prokopenko