HTML, Body height 100% does not work

html css angularjs cordova twitter-bootstrap-3

21,786

Solution 1

What seems to me, the directive ng-view is the parent of your application and header, content, footer are loaded in this div. So you have your header div at correct place, your footer is also placed correctly as it is absolutely positioned.

But in case of your content area, that is relative to the ng-view div.

I would recommend you to make it 100% height. Something like:

div[ng-view]{
     height: 100%;
}

Solution 2

Have you tried to add the following css and set Important attribute

html, body { height: 100% !important }

Solution 3

This most likely is because of the fact that in CSS the 100% is a relative value.

With width the default 100% is the width of the screen, or whatever you are looking at.

Height however does not take the height of the screen as 100%. It needs a solid value.

I think that if you change

html, body {
    background: transparent;
    height: 100%;
    margin: 0;
    padding: 0;    
}

with

html, body {
    background: transparent;
    height: 100vh;
    margin: 0;
    padding: 0;    
}

it should work.

The 100vh should set the height of the html to the height of the viewport.

I guess this way works, I have to say though that I myself have not used something to get my page to have a height that is 100% of the screen.

21,786

Author by

Mr.wiseguy

Updated on July 27, 2022

Comments

Mr.wiseguy almost 2 years
Ok, so I have a mobile application with Cordova and AngularJS. For the styling I use Less and Bootstrap.

Problem

In the mobile app I have tried to size my divs with percentage (%). But this does not seem to work. I cannot seem to change the following behavior: The divs are as big as the content inside of them. This problem sounds quite easy and I have tried many options on here (stackoverflow) aswell as on the web. Yet I have not found the solution to fix it and it is getting quite annoying.

I have tried

Adding html, body { height: 100% },

Adding html, body, #canvas { height: 100%}

Adding #canvas { min-height: 100% }

Adding html { height: 100% } body { min-height: 100% }

And a lot of other variations. Using px works, but I don't know how big my mobile device is, so that isn't realy handy.. (I also use bootstrap and some media queries for styling).

Example

When I add elements to my div I get the following behavior:

I want to remove that white empty space, but I can only achieve that when using px instead of %.

Less example:
```
html, body {
    background: transparent;
    height: 100%;
    margin: 0;
    padding: 0;    
}

#canvas {
    min-height: 100%;
}

body {
    -webkit-touch-callout: none;                 //prevent callout to copy image, etc when tap to hold 
    -webkit-text-size-adjust: none;              //prevent webkit from resizing text to fit 
    -webkit-user-select: node;                   //prevent copy paste, to allow, change 'none' to 'text'  
    min-height: 100%;
    margin: 0;
    padding: 0; 
    background-color: @cgiColor;  
}

.header {
    top: 0px;
    width: 100%;
    height: 5%;
    background: @companyColor;
    color: @textColor;
}

.incidentContainer {
    background: @appBodyColor;
    width: 100%;
    height: 70%;
}

.footer {
    position: absolute;
    color: @textColor;
    bottom: 0px;
    height: 15%;
    width: 100%;    
    background: @companyColor;
}
```
Extra information

I am using AngularJS, so my application is a single page application. My index.html looks as follows:
```
<body oncontextmenu="return false" >  
   <div class="{{ pageClass}}"  ng-view ></div>        
   <script type="text/javascript" src="cordova.js"></script>
   <script data-main="main" src="lib/require.js"></script>
</body>
```
With of course the standard links to my CSS sheets, and so on. All the other pages are includes in the 'ng-view' and don't have any or tags. This because they are included.

Solution

The solution was to add the following CSS rule:
```
div[ng-view]{
     height: 100%;
}
```
This worked, because all divs (except for html & body) are children of this item. Adding the 100% made the div space span to 100% of the screen and thus provides a space for percentage to work.

Credits go to Jai for this answer!
Katana314 over 8 years

I agree I think this approahc should work, but I disagree with the statement "Height however does not take the height of the screen as 100%" as I have done this myself for several pages.
Mr.wiseguy over 8 years

It does not work, adding { height: 100vh } to my html, body tag results in the same view :(
Jelmergu over 8 years

@Katana314 In my experience it did not work, but if my statement is not true in your experience then I guess my experience is lacking Mr.wiseguy I am sad to say that I do not know of a other solution
Katana314 over 8 years

We probably need rendered HTML to confirm, but this sounds on-point. Specifically, make the ng-view 70% height as the employeeContainer is, then the employeeContainer 100% height (of the former element). Any other intermediate containers will need 100%.
Jai over 8 years

Absolutely! The rendered markup will make thins much clear to answer. @Katana314
Mr.wiseguy over 8 years

Can you give me a little more information about the 'div.pageclass'. Somehow the 'pageclass' translates to <div class ng-view> on runtime. So I do not know where I should add that piece of css. (Also, I have added rendered HTML code to my post)
Jai over 8 years

@Mr.wiseguy check the update. You can target it with ng-view attribute.
Mr.wiseguy over 8 years

It worked like a charm! Thank you very much. This has been bothering me for a long time..