CSS question. Task: there is a high container block, it doesn’t fit on one screen (for example, a div in which there are many paragraphs), you must set the background of this container block so that it is completely painted over.

I found this solution: ask all parent blocks height: 100%; , and set the container block min-height: 100%; . Here is an example:

 html, body { height: 100%; } div { min-height: 100%; background-color: red; border: 2px solid black; } 
 <div> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> </div>

I do not understand why it works . Looks like "shamanism". min-height sets the minimum height. It turns out that the minimum height of the div content is equal to 100% of the height of the div content. Looked in devtools, it turned out that the div can be more height than the body and html .

  • what actually you do not understand? How else to make the height of the block on the whole page? - nueq
  • I don't understand why this works. How is the minimum height associated with the height of the whole page? - Dimon
  • parent height - 100% of the page. The minimum height of your block - 100% of the parent -> 100% of the page. You can set the block height to 100vh, the result will be the same) you can search for information about these units of measurement. its full) - nueq
  • correct, and the minimum height of your block - 100% body - which is 100% of the page. Just for this purpose, use height: 100vh) - nueq
  • Body height - 100% height html, height html - 100% height of the viewport. and the viewport is the viewport, not the whole page - Dimon

2 answers 2

Why does this work?

Because the div just overwhelms (climbs out of the border) the body and that's it. By setting overflow: hidden; for body we will see that the div simply clipped (if the screen height is small).

 html, body { height: 100%; overflow: hidden; } div { min-height: 100%; background-color: red; border: 2px solid black; } 
 <div> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> <p>text text text text</p> </div>

How to deal with this?

This is the height: 100%; setting height: 100%; Blocks of all levels of nesting is rather inconvenient. Just set the min-height: 100vh; block you need min-height: 100vh; where vh - screen height units. The body will then have a default height: auto; and the body will simply adapt to the content.

  • thanks for the answer. I do not understand how the minimum height is related to the height of the whole page - Dimon
  • i know that div is overflowing. and that when setting overflow: hidden; this overflow is clipped. the question is how diva in height turned out to be more body and html - Dimon
  • Yes, because the body and html , when they are given 100% occupy one screen. And the div takes up at least one screen, but maybe more (as in this case) at min-height: 100%; . - Vadim Ovchinnikov
  • @Dimon helped you answer the question? - Vadim Ovchinnikov
  • an idea with 100vh planted - Dimon

Work min-height: 100% can be understood by the example of installing adherent footer. At the same time there are styles:

 * { margin: 0; padding: 0; } html, body, .wrapper { height: 100%; } .content { box-sizing: border-box; min-height: 100%; padding-bottom: 90px; } .footer { height: 80px; margin-top: -80px; }

And the markup:

 <div class="wrapper"> <div class="content"> <p>ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй ййй </p> <p>ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц ццц </p> <p>ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу ууу </p> <p>ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк ккк </p> <p>еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее еее </p> </div> <div class="footer"></div> </div>

At the same time, min-height: 100% works like this:

  1. If the CONTENTS are LITTLE for the content block, then its height is MINIMALLY equal to 100% of the height of the viewport (the wrapper is 100% of the height of the body , the body is 100% of the height of html , and html is 100% of the height of the viewport ). At the same time, the content block has a lower paddind buffer negative, and the block of the footer block has a negative margin , which allows, in case of a lot of content, to crawl onto this padding buffer.

  2. If the content DOES NOT BREAK on the screen (the contents of MANY in the content block), then the height is determined by the content - the content stretches.

I repeat once more that everyone remembers - if the content is small, the block height is equal to the height of the viewport (this is the MINIMUM height value, that is, it cannot be less, and more - please, if you can stretch the content), if it is a lot - the block height is MORE The height of the viewport is determined by the content, which stretches it to this height.