0

When I access "Responsive Mode" in any browser and I choose and iPad, one of my pages's footer is not at the end of the page. This happens only on this page because it doesn't have a lot of content to scroll through.

Whitespace under html/body

Is this just a Device Toolbar problem? Both in Firefox/Chrome I have this problem

I tried:

html { height:100% } body {min-height:100% }

Wick
  • 1
  • 3

3 Answers3

0

good use case for absolute positioning

body{
  min-height:100vh;
  position:relative;
  }
  footer{
  position:absolute;
  bottom:0;
  }
  
  html,body{
  margin:0;
  }
<html>

<body>
  <div>some text</div>
  <footer>my footer</footer>
</body>

</html>
DCR
  • 14,737
  • 12
  • 52
  • 115
  • This ruins more other pages. The footer now covers some content. https://imgur.com/a/10aBfT3 – Wick Dec 09 '22 at 22:26
0

Assuming you're using flex. In a css file,

html, body {position: relative; min-height: 100%; height: 100%;}
body {display: flex; flex-flow: column;}

.spring {flex: 1;}

In a html file,

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <!-- content elements up here -->
        ...

        <div class="spring"></div>
        <!-- footer or bottom page elements here -->
    </body>
</html>

The div with the spring class will (should?) push any elements beneath it to the page bottom. If the content exceeds the page or view height, the scroll bar will appear. The spring div should be nested within the body element.

njc
  • 128
  • 2
  • 8
  • This indeed worked! I still have some weird margin and I don't know why,(https://imgur.com/a/lXfosRK) compared with the other pages, but at least is working. Thanks! – Wick Dec 09 '22 at 22:31
0

/* Try this to add in top and add your css*/

html {
    box-sizing: border-box
}

*,*:before,*:after {
    box-sizing: inherit
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
    padding:0;
}
prathamchande
  • 11
  • 2