Good day, a question hackneyed. In Google there is information, but in all examples you need to wrap an unnecessary div block. please tell me whether you can do without it. For example, there is such a structure

<header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt sequi</p> </header> <main> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p> </main> <footer> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. taque cupiditate quas quasi soluta.</p> </footer>

Is it possible to squeeze the footer like this here without wrapping it? in div too, thanks

  • there is an answer here.stackoverflow.com/questions/33753/… - Jean-Claude
  • one
    there is a wrapper wrapped around it, the main content, and in my question, is it possible to leave the following so as not to wrap in an extra div - Dmitry Berezhnoy
  • What is the actual problem? This is 1 div. one!!! When generating a tree in a reactor, a complete page, there may be 5k or more of them. And this page does not really bother. So saving on such things is not necessary. And on the topic: a bunch of examples on the Internet, use any. - Vasily Barbashev
  • Possible duplicate question: How to press the footer always to the bottom of the screen? - Vadizar

3 answers 3

The easiest option is via position: absolute; :

 position: absolute; bottom: 0px;
  • And really, what a negative assessment? It sounds very practical and easy, despite the fact that it works as requested. - Telion
  • @Levelleor because the nonsense is written. In this scenario, the footer will run into the main content if it reaches the bottom of the screen. - Vadizar
  • @Vadizar indent bottom? :) Well, that is, the method is working and it is quite possible to use it, even if the method above looks better. - Telion
  • @Levelleor he is not working. - Vadizar

In case there is no possibility to use additional wrapper, but you need a reinforced concrete solution, I wrote this function on jQuery :

 $(document).on('ready', stickyFooter); $(window).on('resize', stickyFooter); function stickyFooter() { var $footer = $('.footer'); $footer.siblings('.spacer').remove(); var contentHeight = $('body').height(), windowHeight = $(window).height(); if(contentHeight < windowHeight) { $footer.before('<div class="spacer" style="height: ' + (windowHeight - contentHeight) + 'px;"></div>'); } }
  • Not strong in jaquerry, how to apply to the markup that you specified? - Dmitry Berezhnoy
  • Instead of .footer writing footer - dmitryshishkin

1. Solution through absolute positioning for a fixed footer height

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

2. Solution via Flexbox for adaptive footer height

 body { display: flex; flex-direction: column; min-height: 100vh; } main { /* Чтобы занимал оставшееся пространство */ flex-grow: 1; } footer { /* Чтобы footer не уменьшался */ flex-shrink: 0; } 
 <header> header </header> <main> content </main> <footer> footer </footer>

3. Solution through tables for adaptive footer height

 body { display: table; min-height: 100vh; } main { display: table-row; /* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */ height: 100%; } 
 <header> header </header> <main> content </main> <footer> footer </footer>

4. Solution using jQuery for adaptive footer height

 // Высчитываем высоту footer и делаем соответствующий отступ от main: function footer(){ $('main').css('padding-bottom',$('footer').height()); } window.addEventListener('load',footer); window.addEventListener('resize',footer); 
 html { /* Растягиваем документ на всю высоту окна */ height: 100%; } body { position: relative; /* Растягиваем body по высоте html */ min-height: 100%; } main { /* Выставляем отступ с высотой footer по умолчанию */ padding-bottom: 30px; } footer { /* Позиционируем footer внизу main */ position: absolute; bottom: 0; width: 100%; /* Высота footer по умолчанию */ height: 30px; } 
 <html> <head> <script src='https://code.jquery.com/jquery-3.1.1.slim.min.js'></script> </head> <body> <header> header </header> <main> main </main> <footer> footer </footer> </body> </html>