How come there is a varying gap between the fixed header and the main content when the height is set to 10%?

Question

How come there is a varying gap between the fixed header and the main content when the height is set to 10%?

I've noticed a peculiar issue when using percentage values for the height of my fixed header and margin-top of the main div.

Everything works smoothly when I set the header height to 50px and margin-top of the main area to 50px.

However, when I change these values to 10%, the distance between the header and the main becomes inconsistent:

header {
  position: fixed;
  display: block;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 10%;
  background-color: green;
}

main {
  margin-top: 10%;
  background-color: blue;
}

<header>
  My Header
</header>
<main>
  Main area here!
</main>

JSFiddle: https://jsfiddle.net/azizn/L7sroo4m/

Can anyone provide an explanation for this inconsistency?

html css

Answer 1

Answer №1

Ensure that your HTML and body tags have specific height and width properties by adding the following code snippet:

html, body{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

Below is the complete CSS code:

html, body{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
header {
  position: fixed;
  display: block;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 10%;
  width: 100%;
  background-color: green;
}
main {
  position: absolute;
  display: block;
  top: 10%;
  width: 100%;
  background-color: blue;
}

I set main's position: absolute and used top instead of margin to prevent body overflow. Using margin would require setting body{height: 90%;}, but it's better practice to keep the header within the body element.

Answer 2

Ensure that your HTML and body tags have specific height and width properties by adding the following code snippet:

html, body{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

Below is the complete CSS code:

html, body{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
header {
  position: fixed;
  display: block;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 10%;
  width: 100%;
  background-color: green;
}
main {
  position: absolute;
  display: block;
  top: 10%;
  width: 100%;
  background-color: blue;
}

I set main's position: absolute and used top instead of margin to prevent body overflow. Using margin would require setting body{height: 90%;}, but it's better practice to keep the header within the body element.

Answer 3

Answer №2

GCyrillus provided the clues that helped me answer this question:

The issue lies in the fact that the percentage value of height pertains to the parent's height, while the percentage value of margin-top relates to the parent's width.

The remedy is to steer clear of percentage values and instead utilize viewport units x vh, which are based on the height of the viewport.

In essence, all you need to do is swap 10% with 10vh in my demonstration and everything will function smoothly.

Here is an illustration of viewport units: http://www.quirksmode.org/css/units-values/viewport_small.html

Answer 4

GCyrillus provided the clues that helped me answer this question:

The issue lies in the fact that the percentage value of height pertains to the parent's height, while the percentage value of margin-top relates to the parent's width.

The remedy is to steer clear of percentage values and instead utilize viewport units x vh, which are based on the height of the viewport.

In essence, all you need to do is swap 10% with 10vh in my demonstration and everything will function smoothly.

Here is an illustration of viewport units: http://www.quirksmode.org/css/units-values/viewport_small.html

How come there is a varying gap between the fixed header and the main content when the height is set to 10%?

Answer №1

Answer №2

Similar questions

Why won't my navbar shift to the right when using mr-auto?

Which method is more effective: embedding PHP processing code within HTML files, or having forms redirect to separate PHP scripts that ultimately point back to static pages?

Adjust the width of an HTML input using the Bootstrap 5 form-control class

What are some strategies for creating a website that caters to both web crawlers and users of single page applications?

Designing in Ionic 3.x: Implementing Ion-Icon with a gradient backdrop (ion-chip)

Implementing CSS styles to Iframe content

What is the rationale behind positioning the closing right angle-bracket of an HTML tag next to the opening left angle-bracket of a different HTML tag?

How can I dynamically insert HTML content into a data-attribute using JavaScript?

I need to implement a div-based dropdown with a scrollbar in JavaScript and CSS to prevent it from extending beyond the screen. Additionally, the use of struts is essential in this implementation

Concealing a button within a specific interface

Various lists do not appear directly under each other

What is the best way to display content next to an image, as well as below the image once it finishes?

Using importXML with Internet Explorer 11

Enhance your table layout with Bootstrap 3 by adjusting textarea size to fill

Unable to initialize styles in a newly created Angular CLI project

Comprehending the Syntax of the ExtJS Framework

What could be the reason for the malfunction of the min value in my Material UI date textfield?

Is it possible for a div to extend beyond the previous div's boundaries using CSS?

Struggling with a clash of styles between the float property and the navigation style in HTML

Verify if the specified value is present in the dropdown using AngularJS