user1352057 user1352057 - 1 year ago 95
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:

The Issue:


component has a
style applied to it which is the following:

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

In the mobile view the
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download