0

I am using ng-view, to display view based on the routeProvider. In my application, ng-view added like this 

<div ng-view  style="height: 100%; background:#000000;"></div>.

In one of my views, there is a left navigation, which should displayed 100% in height in the browser. For some reason, left view navigation height is created only based upon the data. That is if data is more, height is incremented.

enter image description here

I am not sure, why height is not incremented even though I set hieght=100%, here is the code of Left navigation

<div class="options1"> 



 <div class="options"> 
         <a ng-repeat="name in list" >{{name.name}}</a>
    </div>

</div >

.options {
    background:#FFFFFF;

    min-height: 190px;

    width:10em;

    height:100%;

    border: 1px solid red;

    color:#FFFFFF;

}

.options1 {
    min-height:100%; 

    background:red;

    width:15em;


}`
niran
  • 1,920
  • 8
  • 34
  • 60

4 Answers4

4

I got it working, it is an CSS issue. I have added this into CSS,

html, body { height: 100%; width: 100%; margin: 0; }.

Here is the link for more details

Css height in percent not working

Community
  • 1
  • 1
niran
  • 1,920
  • 8
  • 34
  • 60
3

use Viewport Height, it's absolutely 

style="height: 100vh;"
Abhishek Gurjar
  • 7,426
  • 10
  • 37
  • 45
Gor
  • 1,385
  • 12
  • 7
2

This isn't an angularJS issue, but most likely a CSS styling issue. If it is so, then you need to investigate it as such - there isn't much information to go on in your question, but a div stretches to 100% of it's parent, so you need to make sure that is happening. Also, positioning is very important.

If this is the case, there is no need to duplicate an answer - see if this other SO answer is of any help.

Community
  • 1
  • 1
Tiago Roldão
  • 10,629
  • 3
  • 29
  • 28
  • Ok, I have edited Question and added CSS. Please let me know if you need more info – niran Apr 29 '13 at 18:17
  • The problem probably isn't with .options, or .options1.. check to see that the ng-view div is 100% height (as in, it really streches from top to bottom), and if not, consider that the problem must be in that div's parent. – Tiago Roldão Apr 29 '13 at 18:22
  • ng-view is not taking 100%. That is the issue I think. here ng-view parent is . so, if I give 100% for ng-view it should take height as 100% right! – niran Apr 29 '13 at 18:34
  • wrong - you need to set body and html to height: 100%, as well. – Tiago Roldão Apr 29 '13 at 20:12
0

I think css:

.ng-scope{
    height: 100% !important;
}

On my computer it works correctly, for reference only

Zhang YH
  • 41
  • 3