Html - Body doesn't fill 100% height of browser

pranav1597
February 2, 2024
126 views
0 votes
2 Answers

There is a small space at the end of the footer element. I tried to get rid of it using html,body:min-height: 100% , it’s not working. I used flex in body element, is it because of that?

link: picture of unused space at end of footer

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  background: #4ac29a;
  font-family: 'Poppins', sans-serif;
}

.form-step {
  position: relative;
  border: 1px solid black;
  width: 300px;
  padding: 10px;
  box-shadow: 0px 0px 10px 2px rgb(202, 201, 201);
  background-color: beige;
  /* margin: auto; */
  flex: 1;
  margin-bottom: 20px;
}

.footer {
  padding: 15px;
  background-color: beige;
}

<!DOCTYPE html>
<html>

<body>
  <div class="form-step active">

    <h1 class="head-info">Personal Info</h1>
    <p class="para-info">Please provide your name,email address and phone number</p>

    <div class="input-group">
      <label for="firstname" class="fname">Name</label>
      <div class="input-effect">
        <input type="text" id="firstname" name="firstname">
        <span class="focus-border">
                        <i></i>
                    </span>
      </div>
    </div>
    <div class="input-group">
      <label for="emailaddr" class="mail">Email Address</label>
      <div class="input-effect">
        <input type="email" id="emailaddr" name="emailaddr">
        <span class="focus-border">
                        <i></i>
                    </span>
      </div>
    </div>
    <div class="input-group">
      <label for="phoneno" class="phone">Phone number</label>
      <div class="input-effect">
        <input type="number" id="phoneno" name="phoneno">
        <span class="focus-border">
                        <i></i>
                    </span>
      </div>
    </div>

  </div>
  <!-- form 1 end -->

  <div class="form-step">

    <h1 class="head-info">Select your plan</h1>
    <p class="para-info">You have the option of monthly or yearly billing.</p>

    <div class="plan-opts">
      <div class="plan-opt">
        <img src="./images/icon-arcade.svg" alt="arcade-icon" />
        <div class="opt-flex">
          <h1 class="opt-title">Arcade</h1>
          <p>$9/mo</p>
        </div>
      </div>
    </div>

  </div>
  <!-- form 2 end -->

  <div class="footer">
    <div class="btn-section">
      <a href="#" class="btn btn-next">Next</a>
    </div>

  </div>

</body>

</html>

Tags: css html

Answers

- red1dev
- February 2, 2024 at 8:24 am
- 0 votes
0
add min-height: 100dvh; to the body:
```
body {
  min-height: 100dvh;
}
```
Login or Signup to reply.