What is the best way to adjust a div's height to fill the remaining space of the viewport after the header's height

Question

What is the best way to adjust a div's height to fill the remaining space of the viewport after the header's height

Is there a way to create a hero section that fills 100vh minus the height of the header, especially when the height of the header is not fixed? I initially used CSS with a height property set to calc(100vh - 310px), where 310px represents the height of the header on my screen. However, I am looking for a responsive solution that adjusts based on different screen sizes. If CSS alone cannot handle this, I would be open to using Javascript or jQuery.

<header></header>
<div class="heroSection"></div>

.heroSection {
   height: calc(100vh - 310px)
}

javascript jquery html css responsive

Answer 1

Answer №1

To achieve this, you may want to consider using the fill-available property.

.heroSection {
    height: -moz-available;          /* This will not be recognized by WebKit-based browsers */
    height: -webkit-fill-available;  /* Mozilla-based browsers will not recognize this */
    height: fill-available;
}

Answer 2

To achieve this, you may want to consider using the fill-available property.

.heroSection {
    height: -moz-available;          /* This will not be recognized by WebKit-based browsers */
    height: -webkit-fill-available;  /* Mozilla-based browsers will not recognize this */
    height: fill-available;
}

What is the best way to adjust a div's height to fill the remaining space of the viewport after the header's height

Answer №1

Similar questions

Sort through data based on specific data fields upon the button click event using JSON and Vue.js

Why is there a false positive in the onChange event for the number type in React TypeScript?

Excessive iterations occurring in JavaScript for loop while traversing an array

How to make an image expand to fit the screen when clicked using HTML and CSS

What is the recommended way to adjust the width of a paper-textarea element in Polymer 1.0?

Sorting of array in AngularJS ngRepeat may result in changing the length of the array

Calculating the combined cost of items in the shopping cart

Assign a value to a jQuery variable from user input

Issue with the _.filter function in lodash library when used in a Node.js environment

The issue of TypeScript failing to return HTML Template Element from Constructor typing is causing complications

Two DIV elements are merging together with a cool zooming effect

unable to properly display application.html.erb

Three-handled slider

Use the CSS class

Querying two MongoDB collections simultaneously to locate a user based on their email address

The enigmatic loop traversal

Troubleshooting Issues with Implementing JavaScript for HTML5 Canvas

Vue has issued a warning stating that the type check for the "eventKey" prop has failed. The expected type was a String or Number, but an Array was provided instead. Additionally, it is advised to

Are cookies with the http_only attribute included in requests made through AJAX?

Using an AngularJS ng-repeat alias expression with multiple filters