Space under <body> or more exactly under <html>-CodePudding

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% }

CodePudding user response：

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 ></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.

CodePudding user response：

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>

CodePudding user response：

/* 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;
}