Good day! There was a problem on the site. if there is little content on the page, then the footer rises to the top and leaves an empty white space, in short, the body is not tied to the screen size. Please tell me what's wrong) Link to the site with such a problem below. Thank you in advance!!!

Link to the site with the problem

  • I vote for closing the question, but I suspect that html, body { width: 100%; height: 100%; } enough html, body { width: 100%; height: 100%; } html, body { width: 100%; height: 100%; } html, body { width: 100%; height: 100%; } , since the body initially has no height - Air
  • so the problem is that it does not help - giorgi ksovrela
  • well then use flex ... never fails - Air
  • Still could not figure it out - giorgi ksovrela
  • For body, set height: 100vh; - in this case its contents always (!) will occupy 100% of the visible width of the screen. - Alex

1 answer 1

 body{ min-height:100vh; display:flex; flex-direction:column; margin:0; } header,footer{ flex:0 0 auto; /*для наглядности*/ height:50px; background-color:green; color:#fff; text-align:center; line-height:50px; } main{ flex:1 1 auto; } 
 <body> <header>Шапка</header> <main></main> <footer>Подвал</footer> </body>

  • Thanks a lot)) your code helped lower the footer to a normal height. that's just behind him did not stretch background. Now there is a white empty link here shows how. could you tell me how to solve this problem - giorgi ksovrela
  • In this case, only the main content block 'main' is stretched. At the same time, his children do not resize. Set the background to the main content block. In your case, section # content. - zhurof
  • Thank you so much) you helped a lot - giorgi ksovrela