Question 240452 in Html Question posted in
Some basic documentation can be found here.

Html – Extra white space at the bottom of my website

I’m making a section with a height of 100vh, but I don’t know why I’m getting extra white space or more than 100vh height due to which its adding scroll bar and white space.

Here is my HTML code :

#second {
  color: #fff;
  padding-right: 10vw;
  padding-top: 200px;
  background-color: black;
  width: 100%;
  height: 100vh;
}

.elem {
  width: 100%;
  padding: 3.5vw 3vw;
  border-top: 1px solid #888;
}

.elem h1 {
  text-transform: uppercase;
  font-size: 7.6vw;
  opacity: 0.7;
}

.elemlast {
  border-bottom: 1px solid #888;
}
<div id="second">
  <div class="elem">
    <h1>The Plug</h1>
  </div>
  <div class="elem">
    <h1>ixperience</h1>
  </div>
  <div class="elem">
    <h1>hudu</h1>
  </div>
</div>

Can you guys please take a look and tell me what am I doing wrong.

Excuse my English.

Tags:

3

Answers


  1. 0

    Your English is fine! From the looks of it, there might be a few factors causing the extra whitespace. Firstly I would add box-sizing which ensures that any padding or border would be included within the width / height of the element:

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

    If this doesn’t work, try resetting the default margins and seeing if this helps:

    .elem h1 {
    margin: 0;
}

    And finally, if these both don’t solve it, reconsider padding on the 100vh section, decrease the value and see if that works

    Login or Signup to reply.
  2. 0

    I always get used to this when starting any HTML/CSS projects.

    body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* This prevents scrollbars from appearing */
}
    Login or Signup to reply.
  3. 0

    Reset all the margin and padding and also set box-sizing: border-box so that border and padding are included to the total height of the containers. And finally, for the #second id set a responsive height value so that it doesn’t force the content to overflow.

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

#second {
    color: #fff;
    padding-right: 10vw;
    /* padding-top: 200px; */
    /* padding-top: 5vh; */
    background-color: black;
    width: 100%;
    height: 100vh;
}

.elem {
    width: 100%;
    padding: 3.5vw 3vw;
    border-top: 1px solid #888;
}

.elem h1 {
    text-transform: uppercase;
    font-size: 7.6vw;
    opacity: 0.7;
}

.elemlast {
    border-bottom: 1px solid #888;
}
    <div id="second">
    <div class="elem">
      <h1>The Plug</h1>
    </div>
    <div class="elem">
      <h1>ixperience</h1>
    </div>
    <div class="elem">
      <h1>hudu</h1>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search