Courtney Courtney - 2 months ago 8
CSS Question

Child div of absolutely positioned parent not taking the full height of page

I am having issues with a bug in a project I am working on.

The mobile menu which I want to take the full height of the viewport when it is less than 768px doesn't have a height even though I set it to 100%.

It will only be in view when toggled using the hamburger icon.

The

nav
element is absolutely positioned and the mobile menu is the last child element of the
nav
element.

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

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

I have got a workaround to it which is to set the
position
property of the
section
below the
nav
to
relative
and set
top: -40px
.

I will have to set the
position
property of the
nav
element to
static
as well for this to work.

However, I don't like this because it leaves a space between the two
section
elements on the page.

Is there a way I can get the mobile menu to have 100% height without having to change the
position
properties that I have at the moment?

Here is the link to the page I am talking about: https://carifood-init.appspot.com/

Answer

To troubleshoot your height: 100% problem, have a look at this post:

As an alternative, use height: 100vh.

From the spec:

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

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

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

Browser Compatibility (viewport units have pretty much full support among major browsers, except IE 9, 10 and 11, and Edge, don't support vmax)

Comments