Hello!

The theme, of course, is banal to horror. But I would like to know for sure:

Is there a way to press the basement of a non-fixed (!) Height to the bottom of the site without using scripts that would work in IE8 +?

Thank .)

PS There is such a way, but when I connect the jQuery (O_o) library in chrome, the site "shrinks" vertically and the basement, of course, is no longer pressed to the screen.



2 answers 2

Good day! If I understand you correctly, then you need the following:

CSS:

html,body{ height:100%; margin:0; } #content{ min-height:70%; background:#369; } #footer{ height:30%; background:#d33; }

HTML:

 <div id="content"></div> <div id="footer"></div>

UPD: Then, I think you need this:

CSS:

  html,body{ height:100%; margin:0; padding:0; background:#d33; } #wrapper{ display: table; height:100%; } #footer{ background:#769; display: table-row; height:30%; } #wrapper, #footer{ width:100%; } #content{ background:#d33; }

HTML:

 <div id="wrapper"> <div id="content"> text<br /> text<br /> text<br /> </div> <div id="footer"> text<br /> text<br /> text<br /> text<br /> text<br /> </div> </div>
  • Not. You did not understand correctly =) I need that the basement would occupy the height of the content in it. There, for example, navigation can be duplicated. I cannot know how many menu items there will be to calculate the height. Look at the way that I wrote, it works fine, not counting the strange interaction with jQuery - psycho_Octopus
  • see UPD. In this case, the footer will stretch as a percentage. If you need the footer to be only according to the height of the content, set the #footer height to 1%. - idd
  • It seems to work. Thank you.) - psycho_Octopus

The question is incorrectly formulated, but I realized that the footer should always be pressed to the bottom. Here are some solutions:

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>