Good day!

Faced the following problem: there is an html structure:

body { margin: 0; padding: 0; } #container{ min-height: 100%; padding-bottom: 50px; } .item1{ position: relative; width: 50%; height: 50px; margin: 0 auto; background-color: green; } .item2{ position: absolute; width: 50%; height: 1000px; background-color: blue; } #footer{ position: absolute; bottom: 0; width: 100%; height: 50px; background-color: black; } 
 <body> <div id='container'> <div class='item1'> <div class='item2'></div> </div> </div> <div id='footer'><div> </body>

Everything works fine, but it takes the .item2 element to take a great height, the screen is extended accordingly, and the footer turns out to be "floating" in the air general form

Is it possible to somehow avoid this without removing the absolute positioning of the inner element?

  • The task is to nail the footer to the bottom or nail to the bottom + so that it is absolutely positioned? - Sasha Omelchenko
  • @SashaOmelchenko, apparently not quite clearly formulated, updated the question - segan
  • you have a website as I understood it has a php-based structure, there the footer will float anyway, there are 5 ways to solve this problem on the Internet. Alternatively, you can shove it into #container with the following position values: relative; top: 100%; - Yuri

4 answers 4

Try this:

 body { padding: 0; margin: 0; } #container { min-height: calc(100vh - 50px); } #footer { height: 50px; background-color: pink; } 
 <body> <div id='container'></div> <div id='footer'> <div> </body>

  • Completed the question. With this approach, it turns out the same thing - segan

Perhaps a solution is useful - the indent in the body from below is equal to the height of the basement, and the basement should be positioned fixed.

  body { margin: 0; margin-bottom:50px padding: 0; } #container{ min-height: 100%; padding-bottom: 50px; } .item1{ position: relative; width: 50%; height: 50px; margin: 0 auto; background-color: green; } .item2{ position: absolute; width: 50%; height: 1000px; background-color: blue; } #footer{ position: fixed; bottom: 0; width: 100%; height: 50px; background-color: black; } 
 <body> <div id='container'> <div class='item1'> <div class='item2'></div> </div> </div> <div id='footer'><div> </body>

    A floating footer, if I understood correctly, is a footer + margin fixed for the element .item2 , so that the footer does not hide it.

     body, html { margin: 0; padding: 0; height: 100%; } #container{ min-height: 100%; } .item1{ position: relative; width: 50%; height: 50px; margin: 0 auto; background-color: green; } .item2{ position: absolute; width: 50%; height: 1000px; background-color: blue; margin-bottom: 50px; } #footer{ position: fixed; bottom: 0; width: 100%; height: 50px; background-color: black; opacity: .3; } 
     <div id='container'> <div class='item1'> <div class='item2'></div> </div> </div> <div id='footer'><div>

    • In your example, the footer moves with the scroll, I wanted it to be at the bottom of the page. Apparently so impossible .. - segan
    • Do you need a footer with a small amount of content pressed to the bottom of the page, and with a large number - behaves like a normal block? - Sasha Omelchenko
    • I need the footer to always be pressed to the bottom of the page, even if there is an absolutely positioned block in the container with a height that exceeds the static page height - segan

    Works with position: absolute;

     * { padding: 0; margin: 0; } #container { min-height: 100%; } .item1{ position: relative; width: 50%; height: 50px; margin: 0 auto; background-color: green; } .item2{ position: absolute; width: 50%; height: 1000px; background-color: blue; } #footer { height: 50px; position:fixed; bottom:0; left:0; width:100%; background-color: red; } 
     <body> <div id='container'> <div class='item1'> <div class='item2'></div> </div> </div> <div id='footer'> <div> </body>

    • Completed the question. With your approach, it turns out the same thing - segan
    • Can you explain what does not work? - L. Vadim
    • It turns out the same thing as in my case, item2 goes beyond the boundaries of the footer down - segan