1

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_linksto 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/

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Courtney
  • 309
  • 2
  • 10

2 Answers2

1

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)

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
0

use jquery for this job: There is an example i used to make height of a section 100% of screen (depending on the device that watch the page it will perform more or less height, so it's responsive).

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

Hope it helps!

JoelBonetR
  • 1,551
  • 1
  • 15
  • 21