I looked at many SO questions on this topic, but did not find my situation. There is a page with content that does not fit on one page. While the content is low, everything is OK. With a large amount of content crawls to the footer , and it remains in its old place:
.footer { position: absolute; width: 100%; bottom: 0; min-height: 20px; background-color: #505050; } What is the way to make cellars for "long" pages?
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> 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> body { display: table; min-height: 100vh; } main { display: table-row; /* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */ height: 100%; } <header> header </header> <main> content </main> <footer> footer </footer> // Высчитываем высоту 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> You can still with verification (if there is little content, then fix, otherwise static).
a lot of content:
if( $(document).height() <= $(window).height() ){ $(".page-footer").addClass("fixed-bottom"); } .page-footer { padding: 1rem; background: #333; color: #fff; text-align: center; } .page-footer.fixed-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; } <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <main> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, harum. Sapiente dignissimos in provident fugit voluptatem commodi, ipsa blanditiis assumenda quasi amet excepturi nostrum voluptatum molestiae ratione, corrupti hic voluptatibus. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum accusamus cum voluptas voluptate esse asperiores cupiditate velit quaerat optio, praesentium ipsa, deserunt veniam facilis libero accusantium! Similique accusamus assumenda beatae amet harum delectus quisquam minima quidem id veniam a eaque iste labore distinctio quia cupiditate, ullam suscipit. Repellendus, porro, officiis! </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero atque officia, hic iure placeat, dolores amet eaque quae, eveniet laboriosam voluptatibus fugit velit aut. Facilis expedita, id quasi asperiores molestiae, numquam provident consectetur maxime ad dolorem illo, voluptas dolore accusantium quam deleniti enim ratione doloremque cum omnis ea maiores, deserunt earum eveniet minima eaque. Soluta earum amet esse rem vitae eaque enim aut obcaecati laudantium provident eius delectus nulla doloremque omnis quisquam, ut eos modi, autem tenetur! Deserunt pariatur cum aspernatur aperiam, obcaecati libero, tenetur veritatis aut praesentium architecto optio perspiciatis quo ut. Atque, soluta doloribus recusandae quibusdam ipsam qui! </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, unde. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus perspiciatis molestiae nemo soluta nesciunt alias porro impedit, perferendis molestias possimus mollitia asperiores laboriosam consectetur enim odit, animi facere earum consequatur in veniam neque quae esse. Beatae iure laboriosam optio? Pariatur. </p> </main> <footer class="page-footer"> FOOTER </footer> little content:
if( $(document).height() <= $(window).height() ){ $(".page-footer").addClass("fixed-bottom"); } .page-footer { padding: 1rem; background: #333; color: #fff; text-align: center; } .page-footer.fixed-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; } <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <main> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, harum. Sapiente dignissimos in provident fugit voluptatem commodi, ipsa blanditiis assumenda quasi amet excepturi nostrum voluptatum molestiae ratione, corrupti hic voluptatibus. </p> </main> <footer class="page-footer"> FOOTER </footer> 
There is also an option using flexbox .
.Site { display: flex; min-height: 100vh; flex-direction: column; background: red; } .Site-content { flex: 1; } /* Просто для демо */ header { background: blue; } footer { background: pink; } * { color: #fff; margin: 0; padding: 0; } <body class="Site"> <header>Header</header> <main class="Site-content">Content</main> <footer>Footer</footer> </body> 
There is a site like CSS Sticky Footer .
If you use their CSS and HTML, then the footer will always be at the bottom, as this solution works on a large number of browsers since IE8.
Here is a code snippet, if not much adapting to your layout everything will work well.
/* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */ html, body {height: 100%;} #wrap {min-height: 100%;} #main {overflow:auto; padding-bottom: 180px;} /* must be same height as the footer */ #footer {position: relative; margin-top: -180px; /* negative value of footer height */ height: 180px; clear:both;} /*Opera Fix*/ body:before {/* thanks to Maleika (Kohoutec)*/ content:""; height:100%; float:left; width:0; margin-top:-32767px;/* thank you Erik J - negate effect of float*/ } /* IMPORTANT You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher. <!--[if !IE 7]> <style type="text/css"> #wrap {display:table;height:100%} </style> <![endif]--> */ <div id="wrap"> <div id="main"> </div> </div> <div id="footer"> </div> 
Your question is incorrectly formulated, which is why all the answers are incorrect. The problem is not in the footer, but in the content. The main unit needs to set the height of the entire screen, set overflow: auto and subtract the height of the footer from it.
Thus, only the main unit will have the scroll area and it will not climb on the footer.
It will look like this:
html { /* Растягиваем документ на всю высоту окна */ height: 100%; overflow: hidden; margin: 0; padding: 0; } body { position: relative; /* Растягиваем body по высоте html */ min-height: 100%; } aside { float: left; background: skyblue; height: 100%; width: 300px; overflow: auto; } main { overflow: hidden; position: absolute; top: 0; bottom: 20px; left: 0; right: 0; } article { overflow: auto; height: 100%; background: green; } footer { background: #ddd; /* Позиционируем footer внизу main */ position: absolute; bottom: 0; width: 100%; /* Высота footer */ height: 20px; } <body> <main> <aside> sidebar </aside> <article> Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера. Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет. Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера. Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет. Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера. Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет. Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера. Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет. Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера. Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет. Выглядеть это будет так: </article> </main> <footer> footer </footer> </body> Source: https://ru.stackoverflow.com/questions/637285/
All Articles