How to force body div to the bottom of page

Question

in tablet and phone devices i'm struggling to force my body's footer to the bottom of the page to sit above the page footer. I've tried setting the bottom to 0 to no avail. this is the current display when scrolled to to bottom of the page on a tablet:

and when not scrolled all the way to bottom:

when not scrolled all the way to the bottom of the page is fine but when you are at the bottom of the page the investments-footer should sit ontop of the footer without all the extra space underneath the investments-footer. I've tried to recreate basic code:

    <body style={{height: 100%, display: block}}>
  <div id="root" style={{height: 100%}>
    <div >
      <div id="web-page-container" style={{paddingTop: "calc(56px + env(safe-area-inset-top))",
        paddingBottom: "env(safe-area-inset-bottom)"}}>
          <div id="1" style={{minHeight: '100vh'}}>
            <div id="2" style={{minHeight: '100%'}}>
              <div id="accountPageRoot" style={{minHeight: '100vh'}}>
                <div class="container" style={{marginLeft: 'auto', marginRight: 'auto'}}> 
                  <div id="investments-root" style={{position: 'relative'}}>
                    <div>
                      <div id="content"/>
                      <div id="content"/>
                      <div id="description" style={{paddingTop: '60px', marginRight: '40px', paddingBottom: '100px', height: "min-content"}}/>
                        <p style={{width: '100%', margin:"0, 0, 20px"}}/>
                      </div>
                    </div>
                    <div id="investments-footer" style={{display: 'flex', alignItems: 'flex-end', position: 'absolute', left: '50px', width: '100vw', alignItems: 'flex-end', zIndex: '1000', transform: 'translateX(-50%)', justifyContent: 'center'}}>
                      <div id="if1" style={{zIndex: '1000', width: '100%', left: '0px', position: 'absolute', bottom: '0px'}}>
                        <div id="if2" style={{maxWidth: '100%', height: '58px', overflowX: 'hidden', overflowY: 'hidden'}} />
                        
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>  
          </div>  
      </div>
      <div id="footer" style={{ minHeight: '72px', verticalAlign: 'middle', textAlign: 'center'}}/>
    </div>
  </div>
</body>

One way I've been able to make the investments-footer stick to the top of the footer is adding

height: -webkit-fill-available;

to the content but the result leave a whole lot more space which doesn't look so good:

If I put a max-height: 500px on the content with it, its' not so bad:

although I don't want to hard code a px because devices will change.

@MisterJojo do you mean on the content? – meWho Mar 31 '23 at 00:10 — meWho, Mar 31 '23 at 00:10

IraSanchez · Answer 1 · 2023-03-31T03:21:20.217

Another person on here asked a similar question. Since the question was asked a while ago, the answer is listed as an edit under the older answer.

In short, the recommendation is to use flexbox for this situation.

Answer specific to your project:

You have a div between your root and web-page-container divs. This one does not have an id. See here:

 <div id="root" style={{height: 100%}>
    <div >
      <div id="web-page-container" style={{paddingTop: "calc(56px + env(safe-area-inset-top))",
        paddingBottom: "env(safe-area-inset-bottom)"}}>

You can use this div as your flex container when working with the link I posted at the beginning of this answer. I would recommend giving this div a height of 100vh, which will make it the height of the viewport, regardless of device.

<div id="root">
    <div style={{display: "flex", flexDirection: "column", justifyContent: "space-between", height: "100vh"}}>
      <div id="web-page-container">

space-between will force the two elements inside the div to opposite ends, and column means it will do so vertically. You may also want to lower the height a bit, depending on your other stylings. Make sure to keep your investments footer in the footer and not the web-page-content.

Additional note: You want to remove the body element you've added around the root. It looks as though you may have added it when debugging or just making the code snippet for this question. When using React, everything in your app will be inside the root div eventually. This is not the case 100% of the time, but seems to be the case here.

Hope this helps.

score 0 · Answer 2 · answered Mar 31 '23 at 01:12

The problem with your code is firstly how you order and stack components together.

Decompose the application into smaller, related components, and manage them independently
Stack the investments-footer and the footer on each other
Then embed them in a <footer> tag
Now you can have them both positioned to the bottom of the screen by either applying some top margin, or using the position property to position the component anywhere on the screen

Here's a simple demonstration

<body>
    <div id="root">
      Your root component would go here
    </div>

    <footer style="position: fixed; bottom: 0;">
      <div id="investments-footer">
         Here's your investments-footer
      </div>
      <div id="footer">
         Here's your other footer
      </div>
    </footer>
</body>

How to force body div to the bottom of page

2 Answers2