the task is to set the div block to the end of the page, like a copyright, as on this page, but if there is not enough text on the page, then this block does not reach the bottom edge. Even if I set a negative margin-bottom a small strip still remains

 .copyright { padding:5px; padding-top:20px; background-color:#e4e4e4; margin-top: 5px; margin: auto; clear: both; } <div class="copyright"> <span class="copyright-text">1</span><br /> <span class="copyright-text">2</span><br /> <span class="copyright-text">3</span><br /> <span class="copyright-text">4</span><br /> </div>
  • add your code, with which you have problems, to the question - it will be so easy for everyone - lexxl
  • @lexxl added code - max619
  • Unfortunately, the task is not quite clear, try to give an example on jsfiddle - martdn
  • @martdn you won't give an example, that's the problem, you need to make a copyright so that it reaches the end of the page, but below it does not scroll, as on this site, scroll down and understand what I need. - max619
  • You need a page frame with a footer pressed to the bottom. Ask the block with the text min - hight: 100%, then footer with the help of a negative margin pull on the block with the text and make an indent in the block with padding. Yes, I completely forgot, body and html need to be done also to make a height of 100% - pepel_xD

4 answers 4

Did you have it? example

 html{ position: relative; min-height: 100%; } .wrapper { margin-bottom: 100px; } .content { width: 450px; margin: 0 auto; padding: 20px; } .footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: #666; } 
 <div class="wrapper"> <div class="content"> <p>Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. Так как цель применения такого текста исключительно демонстрационная, то и смысловую нагрузку ему нести совсем необязательно. Более того, нечитабельность текста сыграет на руку при оценке качества восприятия макета. Самым известным «рыбным» текстом является знаменитый Lorem ipsum. Считается, что впервые его применили в книгопечатании еще в XVI веке. Своим появлением Lorem ipsum обязан древнеримскому философу Цицерону, ведь именно из его трактата «О пределах добра и зла» средневековый книгопечатник вырвал отдельные фразы и слова, получив текст-«рыбу», широко используемый и по сей день. Конечно, возникают некоторые вопросы, связанные с использованием Lorem ipsum на сайтах и проектах, ориентированных на кириллический контент – написание символов на латыни и на кириллице значительно различается. И даже с языками, использующими латинский алфавит, могут возникнуть небольшие проблемы: в различных языках те или иные буквы встречаются с разной частотой, имеется разница в длине наиболее распространенных слов. Отсюда напрашивается вывод, что все же лучше использовать в качестве «рыбы» текст на том языке, который планируется использовать при запуске проекта. Сегодня существует несколько вариантов Lorem ipsum, кроме того, есть специальные генераторы, создающие собственные варианты текста на основе оригинального трактата, благодаря чему появляется возможность получить более длинный неповторяющийся набор слов. </p> <div class="footer"> footer </div> </div> </div>

  • your method turned out to be the closest one, but I had to add one more block, with a height equal to footer , otherwise footer climbs on content - max619
  • one
    but in general, it is better to use min-height probably - martdn

There is such a way :

  * { margin: 0; } html, body { height: 100%; } .page-wrap { min-height: 100%; /* equal to footer height */ margin-bottom: -80px; } .page-wrap:after { content: ""; display: block; } .copyright, .page-wrap:after { height: 80px; } .copyright { background: orange; } 
 <div class="page-wrap"> Content. </div> <div class="copyright"> Copyright. </div>

  • Your way involves the use of a pseudo - class not for its intended purpose ..... - pepel_xD
  • This is normal, the main thing is that the method be cross-browser. And this is one of those. In PostCSS, all sorts of clearfix, sticky footer, blocks are configured in one line. And what happens in the bundle, I do not even look. Well, I see, of course, but only once. - alxshelepenok

check if the padding property of body and html is equal to zero.

  • Checked , did not help - max619
  • @ max619, because not padding, but margin. - Qwertiy ♦ 2:55 pm

It should look like this if I understood you correctly:

 html, body, #wrapper{ height: 100%; margin: 0; } #wrapper{ width: 800px; margin: auto; } #main{ min-height: 100%; margin-bottom: -100px; background: #9c0; } #footer{ height: 100px; background: #f60; } #all{padding-bottom: 100px} 
 <div id="wrapper"> <div id="main"> <div id="all">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div> </div> <div id="footer"></div> </div>