Make header 100% of screen

Question

I'm trying to make a header section 100% of the viewport with height: 100vh;. But somehow it's overflowing.

When looking in the devtools I see that the cause of this problem comes from my navbar. Here's the structure of the HTML:

---body
------header
---------nav
-----------other div
----closing tags

Here's the CSS:

* {
  padding: 0;
  margin: 0;
  border: 0;
  font-weight: normal;
  vertical-align: baseline;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
}

body {

  background: linear-gradient(90deg, #1b1f2a 1.2%, #191d28 1%) 1px 0, #fff;
  background-size: 240px 1px;
  overflow-x: hidden;
}


header {
  height: 100vh;
}

header nav {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 4fr 1fr;
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-areas: "brand links email";
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 95%;
  margin: 50px auto 30px auto;
  padding: 10px auto;
}

So if I change the header nav top margin to 0 there's no overflow.

Here's a link to the actual project: https://www.generationz.dev/projects/portfolio1/index.html

So to clarify the question: How do I to set the header section to be 100% of the viewport without any overflow?

Thank you.

@JamesDeSouza i tried now. doesn't change anything. i would recommend clicking on the link and experimenting with the devtools. — Mendi Sterenfeld, Sep 26 '19 at 19:21
simply; header nav { margin: 0px auto 30px auto; } header {padding-top:50px; } — James De Souza, Sep 26 '19 at 19:27

Michael Benjamin · Accepted Answer · 2019-09-26T19:34:40.297

The nav has a top margin of 50px.

header nav {
  margin: 50px auto 30px auto;
}

The header is set to height: 100vh.

So, you're going to get an overflow because: 100vh + 50px > 100%.

You can remove the top margin on the nav or, instead of height: 100vh on the header, use height: calc(100vh - 50px). There are other options, such as adding padding or borders. See the MDN excerpt below.

Although the nav is nested in the header, the nav top margin is rendered outside the header due to margin collapsing.

From MDN:

Mastering Margin Collapsing

No content separating parent and descendants.

If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.

Another example of margin collapsing:

Why is an element with position: fixed moving with a non-positioned sibling?

score 0 · Answer 2 · answered Sep 26 '19 at 19:27

0

Add float: left in header. Then, it will work

header {
  float: left;
  height: 100vh;
}

answered Sep 26 '19 at 19:27

Aman

26
4

While this maybe solve OP question, you should add more information why you choose this solution. BTW the float not seems the proper method to use (even if it solves this particular issue) since it raise other issues later. – A. Meshu Sep 26 '19 at 19:35
1

Noted. Thanks for the suggestion. – Aman Sep 26 '19 at 19:39

Make header 100% of screen

2 Answers2