Attach the div element to the bottom of the header element

Question

Attach the div element to the bottom of the header element

When it comes to headers, we often use position: fixed; to keep the header fixed at the top of the page. But what if we need two headers - one main header and one smaller header for secondary links? After some research, I discovered a tip that suggests using position: relative; in the parent element style (the main header) and position: absolute; bottom: 0; in the child element style (the div). However, this results in the main header becoming unstuck from the top. One solution could be to add

margin-top: (height of the header);

to the div stylesheet. This may work on your current screen resolution, but on another device, where the height of the main header varies, the second header (div) might end up being positioned too low.

https://i.sstatic.net/Nzmmb.png

One possible workaround is shown below, but even then, the size will vary depending on the device's resolution:

https://i.sstatic.net/XMhrD.png

So, my question remains - How can we properly affix the div element to the bottom of the header element?

html css header

Answer 1

Answer №1

To achieve a sticky or fixed position for both headers, you can set the top property of the main header to 0 and the second header to the height of the main header. This height can be specified as a fixed value like 10px, or as a relative value like 10% or 10vh.

If using a relative value such as 10%, ensure that the ancestor of both headers has position: relative and occupies the full vertical space. Alternatively, using 10vh simplifies this process as it always refers to 10% of the viewport's height regardless of the stacking context.

/* Styles for achieving sticky/fixed positioning */
.header {
  display: flex;
  align-items: center;
  height: 10vh;
  position: sticky;
}

#primary-header {
  top: 0;
  background-color: green;
} 

#secondary-header {
  top: 10vh;
  background-color: red;
}

section {
  height: 5000px;
  background: linear-gradient(to bottom, black, white);
  color: white;
}

<header class="header" id="primary-header">Header 1</header>
<div class="header" id="secondary-header">Header 2</div>
<section>Scroll down...</section>

In more complex scenarios, utilize the calc() function to calculate the sum of various heights, paddings, margins, etc., of the first header in order to determine an appropriate top value for the second header:

/* Additional styles for accounting for varying heights */
.header {
  display: flex;
  align-items: center;
  height: 10vh;
  position: sticky;
}

#primary-header {
  top: 0.5rem;
  padding: 1rem;
  margin-top: 0.5rem;
  background-color: green;
} 

#secondary-header {
  /* Calculate total height for proper positioning */
  top: calc(10vh + 2.5rem);
  background-color: red;
}

section {
  height: 5000px;
  background: linear-gradient(to bottom, black, white);
  color: white;
}

<header class="header" id="primary-header">Header 1</header>
<div class="header" id="secondary-header">Header 2</div>
<section>Scroll down...</section>

Answer 2

To achieve a sticky or fixed position for both headers, you can set the top property of the main header to 0 and the second header to the height of the main header. This height can be specified as a fixed value like 10px, or as a relative value like 10% or 10vh.

If using a relative value such as 10%, ensure that the ancestor of both headers has position: relative and occupies the full vertical space. Alternatively, using 10vh simplifies this process as it always refers to 10% of the viewport's height regardless of the stacking context.

/* Styles for achieving sticky/fixed positioning */
.header {
  display: flex;
  align-items: center;
  height: 10vh;
  position: sticky;
}

#primary-header {
  top: 0;
  background-color: green;
} 

#secondary-header {
  top: 10vh;
  background-color: red;
}

section {
  height: 5000px;
  background: linear-gradient(to bottom, black, white);
  color: white;
}

<header class="header" id="primary-header">Header 1</header>
<div class="header" id="secondary-header">Header 2</div>
<section>Scroll down...</section>

In more complex scenarios, utilize the calc() function to calculate the sum of various heights, paddings, margins, etc., of the first header in order to determine an appropriate top value for the second header:

/* Additional styles for accounting for varying heights */
.header {
  display: flex;
  align-items: center;
  height: 10vh;
  position: sticky;
}

#primary-header {
  top: 0.5rem;
  padding: 1rem;
  margin-top: 0.5rem;
  background-color: green;
} 

#secondary-header {
  /* Calculate total height for proper positioning */
  top: calc(10vh + 2.5rem);
  background-color: red;
}

section {
  height: 5000px;
  background: linear-gradient(to bottom, black, white);
  color: white;
}

<header class="header" id="primary-header">Header 1</header>
<div class="header" id="secondary-header">Header 2</div>
<section>Scroll down...</section>

Attach the div element to the bottom of the header element

Answer №1

Similar questions

How to dynamically add a column to a Wicket table

Learn how to join a comma with a space in AngularJS

Exploring the Depths of HTML with Jquery

Utilize CSS styles exclusively when the user has JavaScript enabled

Sticky full-height slider with horizontal scrolling

In Android, make sure to include a newline after a heading when using the <h3> tag

css3 perspective for text with a sleek appearance

The issue of selecting multiple classes simultaneously is not being resolved

How to access a bootstrap 4 tab panel on a different page

Is it possible to conceal glyphicons by employing the attribute hidden="hidden"?

Image with Responsive Textarea in Bootstrap

What is the best way to create a search box in AngularTS?

Encountering an issue with the router that is unable to correctly read the head.html and tail

org.openqa.selenium.NoSuchElementException: The Label element could not be found with the specified XPATH

"Automatically scroll back to the top of the page once new content

Remove elements from an array based on the indices provided in a separate array

Is it achievable to use multi-level :not selectors in CSS / JS querySelector?

I am eager to demonstrate the utilization of AngularJS in displaying hierarchical table rows

Creating a unique seat arrangement resembling airplane wings

Detecting if a physical keyboard is connected using CSS media query