user1352057 user1352057 - 2 months ago 9
CSS Question

Main will not set to 100% height - Codepen included

Question Background:

I am looking into a sliding menu panel and have the following codepen to display this:

http://codepen.io/daveharris/pen/pEvEad

The Issue:

The

<main>
component has a
slide-panel
style applied to it which is the following:

#main {
background: red;
height: 100vmin!important;
}


In the mobile view the
<main>
component is not setting to a height of 100%, this is displayed with the use of a red background colour, as shown:

enter image description here

This height issue means that when the panel is closed, the underlying menu can be seen as shown:

enter image description here

I cannot work out why the styling of 100% is not fitting to the entire height of the mobile view?

Note I will be using this with an AngularJS project therefore I have two Divs which will wrap all of the contents, these are named as follows:

<div id="ui-view">
<div id"ResultsController">


Why will the height in mobile view not set to 100% height?

Answer

Right now #main height is the same as width value. On #main change to:

#main {
  background: red;
  min-height: 100vh;
}

It will fix your problem. min-height or just height. vh means viewport height, so it will cover all view.

Comments