Child div within a parent div with absolute positioning does not extend to the full height of the webpage

I am currently facing an issue with a bug in my project that I am working on.

The mobile menu is not taking the full height of the viewport when the screen size is less than 768px, even though it has been set to 100%.

It only becomes visible when toggled via the hamburger icon.

The nav element is positioned absolutely, and the mobile menu is the last child element within the nav element.

The nav element is also positioned absolutely for a transparent background so that the section below it can be displayed at the top of the page.

I want the div with the class mobile_links to occupy the full height of the page on mobile devices when toggled.

I have found a temporary solution by setting the position property of the section below the nav to relative and adjusting the top spacing.

In order for this workaround to function correctly, I will need to change the position property of the nav element to static.

However, I am not entirely satisfied with this solution as it introduces space between the two section elements on the page.

Is there a way to achieve full height for the mobile menu without altering the current position properties?

To view the specific page I am referring to, please visit:

htmlcsscss-position

Answer №1

Trying to solve the issue with height: 100%? Check out this helpful post:

  • Tips for using the CSS height property and percentage values

Alternatively, consider using height: 100vh.

Diving into the specifics:

5.1.2. Viewport-percentage lengths: understanding vw, vh, vmin, vmax units

The viewport-percentage lengths are tied to the size of the initial containing block. Any changes in the initial container's dimensions result in proportional adjustments.

  • vw unit - Represents 1% of the width of the initial containing block.
  • vh unit - Represents 1% of the height of the initial containing block.
  • vmin unit - Represents the smaller value between vw or vh.
  • vmax unit - Represents the larger value between vw or vh.

Browser Compatibility (viewport units are widely supported by major browsers, except IE 9, 10, 11, and Edge do not support vmax)

Answer №2

If you want a section to be 100% of the screen height, you can achieve this using jQuery. The following code snippet demonstrates how to do it in a responsive manner:

<script>
$(document).ready(function(e) {
    var windowHeight = $(window).height();
    $('.section').css("min-height", windowHeight);
});
</script>

I hope this solution works for you!

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

Is it possible for a kraken.js backend to manipulate the content of a webpage?

Currently using kraken.js, which is an express.js framework, to construct a localized website. Within the header section, there are 3 language options provided as links. FR | EN | DE My goal is to have the link corresponding to the currently set locale ( ...

javascripthtmlexpressdust.jskraken.js

What is the best way to continuously loop the animation in my SVG scene?

After designing a SVG landscape with an animation triggered by clicking the sun, I encountered an issue where the animation only works once. Subsequent clicks do not result in any animation. Below is my current JavaScript code: const sun = document.getEle ...

javascriptcssanimation

Every time I load the script, my global variables reset. How can I prevent this constant refreshing?

As I work on completing a prototype for my system, I am facing an issue with global variables reinitializing every time the script reloads. Currently, I am not using localStorage and simply need a quick solution to prevent the variables and functions from ...

javascriptjqueryhtml

What causes background-color to create gaps of white space?

How can I remove the white spaces on the right and left side of a section when applying a background-color? https://i.sstatic.net/WbVuv.png I want the background-color to fill out the entire width of the section. Should I use extra padding to solve this ...

htmlcss

Emails sent through an HTML form submission should always include a valid "from"

I am currently in the process of creating a feedback form that allows individuals to provide anonymous feedback. I have explored nodemailer and node-sendmail, but I have encountered an issue with both requiring a from address. While I am aware that this ca ...

javascripthtmlnode.js

modify brand information through the use of javascript and customizable settings

In the default setting, I want all product details to be displayed. If the option value matches the product's brand name (b_name), then I want to display the corresponding details. Let's consider a list of products with their details: Samsung ...

javascripthtmlangularreactjs

Having trouble with applying CSS conditionally in React JS with Typescript?

I'm currently facing an issue with my code where I want the Box to stay highlighted with a black border when clicked. Here's the snippet: interface BigButtonProps { onClick(): void; Title: string; Description?: string; startIcon?: R ...

cssreactjstypescriptconditional-statements

Guide on inserting a dropdown menu following a specific count of <li> elements using Javascript or Jquery

I am currently working on an HTML project <div class="ktmsg"> <ul> <li class="a1"> <a title="Link Tools" href="#"> … </a> </li> <li class="a2"> <a title="Link Tools" href="#"> ...

javascriptjqueryhtmlcss

Utilizing the position relative property with Firefox browser

Similar Question: Is Firefox compatible with position: relative on table elements? Check out this example: a full-width menu formatted as a table with ul dropdown menus. Everything works as expected in IE and Opera, but in Firefox the dropdown uls ex ...

cssfirefoxcss-position

Using the symbols '&', '>', and '*' in the styling of React components

Below is the code snippet in question: const useStyles = makeStyles(theme => ({ row: { '& > *': { fontSize: 12, fontWeight: 'bold', color: 'rgba(33,34,34,0.5)', letterSpacing: 0.5, ...

javascriptcssreactjsmaterial-uistyling

Adjust the x and y coordinates of the canvas renderer

Manipulating the dimensions of the canvas renderer in Three.js is straightforward: renderer = new THREE.CanvasRenderer(); renderer.setSize( 500, 300 ); However, adjusting the position of the object along the x and y axes seems more challenging. I've ...

javascripthtmlthree.js

Strategies for aligning the initial lines of text vertically within a table cell

I am faced with a unique challenge involving a table where the first cell contains the word "name" and the second cell contains some text. Sometimes, this text may include embedded images. The issue arises when an image appears on the first line of the tex ...

javascripthtmlcss

Steps for launching an application through a hyperlink to appear on the foreground rather than the background

For my project, I am utilizing "a href" to open a windows application. <a href={`enter app here`}> //Similar concept as mailto The issue I am facing is that it opens the application in the background rather than bringing it to the foreground. Esse ...

htmlwindowsinternet-explorer

mobile input sliders for selecting ranges

While working on a custom audio player, I encountered an issue with the default html5 input range object. Everything else seems to be working perfectly, with all events firing as needed, except for a frustrating problem on mobile Safari with iOS 11.4: Whe ...

javascriptioshtmlreactjsmobile-safari

Building a table using a JSON object in a React component

I have been dynamically creating a table in React based on the API response received. data = {"name":"tom", "age":23, "group":null, "phone":xxx} Everything was working fine until I encountered a scenario w ...

javascripthtmlreactjshtml-table

Coding with Angular 4 in JavaScript

Currently, I am utilizing Angular 4 within Visual Studio Code and am looking to incorporate a JavaScript function into my code. Within the home.component.html file: <html> <body> <button onclick="myFunction()">Click me</button> ...

javascripthtmlangulartypescript

Ways to create a separator or divider between rows in a table

I'm currently working on creating a table layout and I want to include dividers similar to those seen on this website. Specifically, I am looking to have thin grey dividers between rows. I've attempted the following code, but it doesn't seem ...

htmlcss

Creating a text slider in Javascript with dual quote sets is a fun and interactive

I am looking to create a dynamic quotes text slider with two sets of data. For reference, check out the fiddle link here: https://jsfiddle.net/628r3t1h/ (function() { var quotes = $(".quotes"); var quoteIndex = -1; function showNextQuote( ...

javascripthtmljquerycssslider

Angular forms not recognizing is-invalid class functionality

I was trying to learn angular forms, and I noticed that when I applied the is-invalid class to an input tag, the border color did not change to red. Can anyone explain why this is happening? <div class="container-fluid"> <h1> ...

htmlangularbootstrap-4

The collapsible hamburger navbar is unresponsive and fails to collapse

Currently, I am working on a project that requires my navigation bar to be scaled down to a hamburger menu for mobile view. I have managed to do most of it, but for some reason, the navigation is not collapsing within the hamburger bar. I have been tweakin ...

jqueryhtmlcssresponsive-designhamburger-menu