I reread a bunch of pages, including on stackOverflow, but did not find a solution to my problem. The fact is that with the height of html, body and .container equal to 100%, the page is cut in height, if the amount of content exceeds the height of the browser window, before there were no such problems with the same properties, please tell me what the error is. I tried a bunch of variations with the properties height, min-height, percent and vh, the problem remains. I want to achieve that when the amount of content is less than the height of the window, the elements are stretched to the height of the entire window, and when the amount is greater, there is no described problem.

Screenshot:

enter image description here

HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates in nemo molestiae itaque, eligendi dolores doloremque deleniti ipsum tempore, ducimus dolorem quia vitae incidunt at quas atque sapiente saepe aperiam veniam culpa iusto, nostrum laudantium placeat tenetur id. Enim, dolore? Nesciunt temporibus quibusdam mollitia. Possimus debitis laboriosam rerum iusto illum fugit earum, consequuntur molestias explicabo itaque magnam animi molestiae sint dolore asperiores placeat harum. Quam voluptate magnam deserunt dicta, omnis. Quo excepturi impedit ut adipisci, odit accusantium. Sequi dolores facere, neque nam, officiis pariatur harum totam minima laboriosam obcaecati. Quo soluta repellendus doloremque esse eum, quos officiis assumenda, consequatur reiciendis cum, minus repudiandae nesciunt! Aspernatur, sint ex, odit numquam ducimus architecto minus impedit quod fugiat. Explicabo rem laboriosam, inventore accusantium tempore aspernatur delectus vel eveniet deleniti id repellendus a aperiam omnis quia. Aut quidem iusto nemo natus ea eum tempora voluptate sequi voluptatum sapiente? Dolores, nam labore velit explicabo obcaecati.</p> </div> </body> </html>

CSS:

 html, body { margin: 0; padding: 0; height: 100%; } .container { height: 100%; background-color: teal; } p { margin: 0; padding: 0; }

Link to JSFiddle with sample code

    2 answers 2

    Set the .container min-height: 100%; , not height: 100%;

     html, body { margin: 0; padding: 0; height: 100%; } .container { background-color: teal; min-height: 100% } p { margin: 0; padding: 0; } 
     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates in nemo molestiae itaque, eligendi dolores doloremque deleniti ipsum tempore, ducimus dolorem quia vitae incidunt at quas atque sapiente saepe aperiam veniam culpa iusto, nostrum laudantium placeat tenetur id. Enim, dolore? Nesciunt temporibus quibusdam mollitia. Possimus debitis laboriosam rerum iusto illum fugit earum, consequuntur molestias explicabo itaque magnam animi molestiae sint dolore asperiores placeat harum. Quam voluptate magnam deserunt dicta, omnis. Quo excepturi impedit ut adipisci, odit accusantium. Sequi dolores facere, neque nam, officiis pariatur harum totam minima laboriosam obcaecati. Quo soluta repellendus doloremque esse eum, quos officiis assumenda, consequatur reiciendis cum, minus repudiandae nesciunt! Aspernatur, sint ex, odit numquam ducimus architecto minus impedit quod fugiat. Explicabo rem laboriosam, inventore accusantium tempore aspernatur delectus vel eveniet deleniti id repellendus a aperiam omnis quia. Aut quidem iusto nemo natus ea eum tempora voluptate sequi voluptatum sapiente? Dolores, nam labore velit explicabo obcaecati.</p> </div> </body> </html>

    • in this case, it turns out that .container goes beyond the limits of html and body, the height of which is still equal to the height of the viewport, and not the height of the entire window with content, so it should not be. - rocket27
    • Then transfer the background to the body, or wrap the .container in a container and transfer the background to it - Kniha m
    • In general, this is a crutch, in my opinion, the fact is that earlier, in past projects I didn’t have such problems, I don’t understand what happened, checked in chrome, firefox, opera is one result, I use normolize.css, but it doesn't no changes that could affect this result, such a feeling that there is some kind of error in the styles because of which this problem stretches .. - rocket27
     html, body { margin: 0; padding: 0; } .container { min-height: 100%; background-color: teal; } p { margin: 0; padding: 0; font-size: 40px; }

    Try to remove the height from the body.

    • If you remove the height of the body, it takes the value auto and just like the .container starts to climb out of the html sidelines. If we remove height: 100% from html, it also takes the value auto and stretches along the height of the content, but NOT more than that, but I need the whole page. - rocket27