CSS height is not 100% and footer does not stick at bottom: 0; when on mobile device

Question

I am trying to make an home page for my website and its not sticking to one page and expands to around 120% height, when I set it to 100% height. I am trying to set my h1 and p tags in the middle of the page. When i use inspect and try to shrink the width as if I was on a mobile device the footer doesn't stay at bottom:0; as written in the css but instead it moves up as if footer position was set to bottom: 20%.

html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: sans-serif;
    height: 100%;
}
 html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.container {
    padding: 10% 5%;
    justify-content: center;
    align-content: center;
    text-align: center;
    height: 70%;
    margin-left: auto;
    margin-right: auto;
}


.headerNav {
    background-color: rgb(0, 0, 0);
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 100;
    max-width: 100%;
    right: 0;
    top: 0;
    left: 0;
    padding: 10px 0px;
    font-size: 20px;
    display: grid;
    grid-template-columns: auto auto;
}

.homePG{
    text-decoration: none;
    text-align: left;
    padding: 10px 10px;
}

.headerLogin{
    text-align: right;
    grid-gap: 5px;
}

footer {
    position: relative;
    text-align: center;
    background-color: black;
    color: white;
    padding:10px;
    font-size:15px;
    bottom: 0;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <title>Brandon's Login System</title>
    <link rel="stylesheet" href="includes/header.css">
    <link rel="stylesheet" href="includes/footer.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <nav class="headerNav">
        <nav>
            <a href="./index.php" class="homePG">HOME</a>
        </nav>
        <div class="headerLogin">
            <form class="headerForm" action="includes/login.inc.php" method="POST">
                <input type="text" name="mailuid" placeholder="Username/E-mail...">
                <input type="password" name="pwd" placeholder="Password...">
                <button type="submit" name="login-submit">Login</button>
                <a href="signup.php">Sign Up</a>
            </form>
        </div>
    </nav>
    <section class="container">

        <h1>HOME PAGE</h1>
        <p>
            Welcome to the home page.
        </p>



    </section>
    <footer>
        © 2020 Brandon Ng
    </footer>
</body>

</html>

you must also consider padding when you haven't set the `box-sizing` property to `border-box`. See [here](https://css-tricks.com/box-sizing/) — zgood, Aug 21 '20 at 18:35
Running your code on JSitor on mobile does actually give the desired result. I don't know what problem you're facing. — Tsubasa, Aug 21 '20 at 18:53

Ajeet Eppakayala · Accepted Answer · 2020-08-21T19:19:59.887

Best way for auto expansions is to use flex or grid.

Here I have wrapped them inside a <div class="main-container"></div>

Main Changes

.main-container {
display: flex;
flex-direction: column;
height: 100%;
}

section {
 flex: 1;
}

<section> -> flex: 1 will auto adjust itself inside header and footer.

html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: sans-serif;
    height: 100%;
}

.main-container {
display: flex;
flex-direction: column;
height: 100%;
}

section {
 flex: 1;
}

.container {
    padding: 10% 5%;
    justify-content: center;
    align-content: center;
    text-align: center;
    height: 70%;
    margin-left: auto;
    margin-right: auto;
}


.headerNav {
    background-color: rgb(0, 0, 0);
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 100;
    max-width: 100%;
    right: 0;
    top: 0;
    left: 0;
    padding: 10px 0px;
    font-size: 20px;
    display: grid;
    grid-template-columns: auto auto;
}

.homePG{
    text-decoration: none;
    text-align: left;
    padding: 10px 10px;
}

.headerLogin{
    text-align: right;
    grid-gap: 5px;
}

footer {
    position: relative;
    text-align: center;
    background-color: black;
    color: white;
    padding:10px;
    font-size:15px;
    bottom: 0;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<head>
    <title>Brandon's Login System</title>
    <link rel="stylesheet" href="includes/header.css">
    <link rel="stylesheet" href="includes/footer.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main-container">
    <nav class="headerNav">
        <nav>
            <a href="./index.php" class="homePG">HOME</a>
        </nav>
        <div class="headerLogin">
 <form class="headerForm" action="includes/login.inc.php" method="POST">
                        <input type="text" name="mailuid" placeholder="Username/E-mail...">
                        <input type="password" name="pwd" placeholder="Password...">
                        <button type="submit" name="login-submit">Login</button>
                        <a href="signup.php">Sign Up</a>
                    </form>
    </nav>
</body>
<body>
<section class="container">

    <h1>HOME PAGE</h1>
    <p>Welcome to the home page.</p>



</section>
<footer>
    © 2020 Brandon Ng
</footer>
</div>
</body>

</html>

Expand the snippet to see the change.

If i were to use display: grid, what would the replacement flex-direction be in grid, when i change flex to grid and removed flex:1 it made the footer go back to being at bottom: 25% instead of at 0. — Brandon, Aug 22 '20 at 04:42

CSS height is not 100% and footer does not stick at bottom: 0; when on mobile device

1 Answers1