Is there a different option than using 100vh for fixing positioned elements?

I'm working on a flex container with a nested div for top navigation. I want the top-nav to expand and occupy the full height of the viewport when it expands. Setting a height of 100vh seems like the obvious choice, but I'm looking for a more widely supported alternative.

The html and body have a height of 100%, yet the content overflows, allowing me to scroll the page.

This is my current CSS:

.top-nav .top-nav-links-wrapper {
    position: fixed;
    width: 100%;
    background-color: #fff;
    top: 50px;
    left: 0;
    height: 100%;        
}

Is there another way to achieve this without setting the height to 100vh?

javascripthtmlcss

Answer №1

Viewport units such as vh and vw have great browser support; It is recommended to utilize them.

An alternative method is to set the position to fixed and specify bottom: 0. The value of height is dependent on the parent element's height and does not consider position, margin, or padding; whereas bottom sets an offset from the bottom of the parent container. The same concept applies when comparing width with right. It is important to note that using height and bottom simultaneously will result in conflicting styles.

Below is a functional example:

.fullscreen {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  
  background: cornflowerblue;
}

.body {
  height: 2000px;
}
<div class="fullscreen">this will be fullscreen with a top offset</div>

<div class="body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed arcu quis dui congue pulvinar. Ut scelerisque suscipit ipsum, in elementum velit aliquet sit amet. Nulla tempus iaculis vestibulum. Mauris eu odio id dui consectetur blandit facilisis nec metus. Nullam laoreet risus et aliquam viverra. Sed eu imperdiet metus. Vivamus at dui turpis.</p>
</div>

Regardless of your chosen units, the page will still allow scrolling behind the expanded navigation. This issue can be resolved by giving your navbar a fixed position so it remains visible while scrolling.

Answer №2

Avoid utilizing vw/vh in your web design as they are not well-supported by Safari, especially with the notch on iPhoneX.

As an alternative, consider using position, top, right, bottom, and left.

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

This will occupy 100% of the first ancestor with a position other than the default, static.

If you use position: fixed, it will expand to cover the entire layout viewport.

Be aware that when dealing with the iPhoneX notch, 100vw includes the notch in its measurement even if it's not included in your DOM.

Additionally, iOS Safari does not interpret 100vh exactly as expected (it may be slightly more than 100 viewport height).

Consistency can also be tricky with window.innerHeight/Width and 

document.documentElement.clientHeight/Width
in Safari.

In my experience working on a high-traffic website, I had to prohibit my team from using vw/vh due to these issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging several lists in columns with a customized header title

I am looking to have 7 lists displayed side by side, each with a unique styled header title. I want the lists to be neatly organized under their respective titles, including the bullets. I attempted to use text-indent for this purpose, but it seems that ...

htmlcssvalidation

The successful execution of $.ajax does not occur

Starting out with ajax, I wanted to create a simple add operation. Here is the code that I came up with: HTML: <!doctype html> <html> <head> <title>Add two numbers</title> <meta content="text/html;charset=utf-8" h ...

javascriptphpjqueryhtmlajax

Send dropdown selections to a Javascript function and convert them into an array

Within my JavaScript function, I need to pass multiple selected values from dropdown menus and store them in a JavaScript array. Each time a value is selected and sent using the onchange() function, it should be added to the array. If the same value is sel ...

javascriptphparrayshtml-select

Hide the burger menu when a link is clicked

Is there a way to make my Bootstrap burger menu automatically close when the user clicks on a menu link, rather than having to click on the burger itself? I've tried using some JavaScript code but it ends up disabling the burger menu entirely. Can any ...

javascripthtmlcssmenubootstrap-5

Activating/Deactivating Checkbox using Jquery

I'm having trouble getting this code to function properly when there are multiple instances of datepicker on the page. When selecting the option "I currently work here," it is affecting all groups instead of just the current one, which is not the des ...

javascriptjquerydatepicker

Develop your own personalized Angular schematics that produces a file that begins with an underscore

Having trouble with custom Angular schematics file naming. I'm trying to create a theme SCSS file that starts with an underscore followed by a double underscore as a delimiter. For instance, I want the file name to be _mouse-theme.scss, using the nam ...

javascriptangulartypescriptsassangular-schematics

Tips for creating multiple diagonal lines with CSS and HTML

Is there a way to create multiple diagonal lines within a rectangle using CSS and HTML from the start? I am interested in incorporating diagonal lines at the onset of the rectangle. Here is an example code that displays the rectangle: <div className={ ...

htmlcssreactjs

Enhance Your Website with Dynamic Navigation Animation

Seeking assistance with animating a navigation bar on and off the screen from the left side. The nav is not animating as expected using the latest version of jquery.min.js. The first step was to animate the nav upon clicking an object. View the current pro ...

jqueryhtmlcss

Having trouble loading the linked CSS file in the Jade template

My directory structure is organized as follows: --votingApp app.js node_modules public css mystyle.css views test.jade mixins.jade In the file mixins.jade, I have created some general purpose blocks like 'bo ...

javascripthtmlcssnode.jsexpress

Center the image within the div by setting its position to absolute

<div class='img-box'> <img /> //position absolute <img /> //position absolute <img /> //position absolute <img /> //position absolute I am struggling to center the images within this div because of their absolute p ...

javascriptjqueryhtmlcss

Broken link in navigation bar

I encountered an issue with the navigation bar on this website. When I click on "Leistungsspektrum" in the navigation bar, it returns a message stating that The requested URL /leistunsspektrum.html was not found on this server. However, the actual file nam ...

htmlcsshyperlinknavigation

Scrolling to the next wrap class in jQuery is not functioning properly with the chatbox and ScrollTop

I have created a chat box using jQuery. However, I am facing an issue where when I click the button multiple times, the scroll returns to the top. My objective is for the scroll to move to the next wrap class when the button is clicked. Here is a snippet ...

javascripthtmljquerycss

Is there any way to remove the two default aspNetHidden Divs in asp.net web forms?

After creating an empty webform page in asp.net, the generated code looks like this: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Threetier.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org ...

javascriptjqueryhtmlcssasp.net

What is the best way to use node.js to send a .json file via HTTP POST request?

As a beginner in these concepts, I seek guidance on how to create a script for making an HTTP POST request that sends a .json file containing an array of jsons. My resource is an npm module available at: https://github.com/request/request, along with a tut ...

javascriptnode.jshttphttprequest

What is the reason for the inability to access a global variable type variable outside of the $.each function when used within the $

While analyzing a code snippet, I came across an issue with a variable causing an error. function call(data) { $.each(data, function(index, value) { var ddlId = 'ddlCat' + data[index].docId; var html = '<tr id="supp_doc_row_&ap ...

javascriptjqueryajaxvar

When the source file is located in other directories, gcovr fails to generate a comprehensive report

I'm having trouble getting the correct HTML output from gcovr when the source file is located relative to my root directory. Let me illustrate with two cases where gcovr works and where it encounters issues: CASE:1 - Successful execution of gcovr Af ...

htmlrelative-pathgcovcpputestgcovr

Customize Bottom Navigation Bar in React Navigation based on User Roles

Is it possible to dynamically hide an item in the react-navigation bottom navigation bar based on a specific condition? For example, if this.state.show == true This is what I've attempted so far: const Main = createBottomTabNavigator( { Home: { ...

javascriptandroidreactjsreact-nativereact-navigation

Conceal a table with jQuery

Is there a way to initially conceal a table on page load only to reveal it with a sliding animation when a specific link is clicked? I have attempted using the following code to hide the table: $('.table_div').hide(); I have enclosed the table ...

javascriptjqueryhtmlcss

"Uncaught ReferenceError: $ is not defined - $function()" error in JavaScript/jQuery

When attempting to execute a JavaScript/jQuery function, an error is encountered when using Firebug: $ is not defined $(function()". The issue arises from the placement of the JavaScript code within a file named core.js that is referenced by index.php. W ...

javascriptjquery

How can I trigger a select tag change event in Jquery without any user interaction?

I'm currently facing a small hurdle. I have 3 cascading drop down lists, namely category, subcategory, and subsubcategory. The user picks a value from the category list, which then displays related values in the subcategory list. When the user changes ...

javascriptjqueryajax