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

Html – Why 100vh can't strecth full screen but flex column does?

When I inspect the codes below, I noticed the body tag can’t stretch full height according to HTML height due to that the scroll appears, and I don’t want that.

I try set display to flex column and that work perfect, no scroll and that size as my expected. But I can’t understand why it’s work when I set display to flex column.

* {
    padding: 0;
    margin: 0; 
}

body {
  width: 100%;
  height: 100vh;
  background-color: white; 
} 

main {  
  width: 100%;
  height: 100vh;   

    > .header {
        height: 15%;
        background: gray;
        margin: 1rem;
    }

    > .body {
        height: 70%;
        margin: 1rem;
        display: flex;

        > aside {
            width: 30%;
            height: 100%;
            background: gold;
        }

        > article {
            width: 70%;
            height: 100%;
            background: gray;
            margin-left: 1rem;
        }
    }

    > .footer {
        height: 15%;
        background: gray; 
        margin: 1rem;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Float Property</title>
</head>
<body>
  <main>
    <section class="header"></section>
    <section class="body">
      <aside></aside>
      <article></article>
    </section>
    <section class="footer"></section>
  </main>
</body>
</html>
Tags:

2

Answers


  1. 0

    If you visually inspect your sections you have four distinct margins being produced. margin areas

    Each of these areas uses 1rem or 16px. So you can use calc() on the body height to accommodate these areas to remove the overflow that is adding scroll bar.

    I also changed the height of main to 100%.

    * {
    padding: 0;
    margin: 0;
    /* a variable for the margin used in the vertical sections within your main element */
    --global__margin: 1rem;
}

body {
  width: 100%;
  /* You can assign a variable to the margin you 
    use between each vertical section in main,
    4 being the amount of margin seperations you have */
  height: calc(100vh - var(--global__margin) * 4); 
  background-color: white; 
} 

main {  
  width: 100%;
  height: 100%;

    > .header {
        height: 15%;
        background: gray;
        margin: var(--global__margin);
    }

    > .body {
        height: 70%;
        margin: var(--global__margin);
        display: flex;

        > aside {
            width: 30%;
            height: 100%;
            background: gold;
        }

        > article {
            width: 70%;
            height: 100%;
            background: gray;
            margin-left: 1rem;
        }
    }

    > .footer {
        height: 15%;
        background: gray; 
        margin: var(--global__margin);
    }
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Float Property</title>
</head>
<body>
  <main>
    <section class="header"></section>
    <section class="body">
      <aside></aside>
      <article></article>
    </section>
    <section class="footer"></section>
  </main>
</body>
</html>
    Login or Signup to reply.
  2. 0

    This is a layout that begs for CSS-Grid, substituting gap for the problematical margins.

    * {
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: white;
}

main {
  height: 100vh;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1.5fr 7fr 1.5fr;
  row-gap: 1rem;
  >.header {
    background: gray;
  }
  >.body {
    display: grid;
    grid-template-columns: 3fr 7fr;
    column-gap: 1rem;
    >aside {
      background: gold;
    }
    >article {
      background: gray;
    }
  }
  >.footer {
    background: gray;
  }
}
    <main>
  <section class="header"></section>
  <section class="body">
    <aside></aside>
    <article></article>
  </section>
  <section class="footer"></section>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search