How can I get angular-ui-bootstrap tabs to fill the remaining height

Question

I have a plunker to show: http://plnkr.co/edit/nGjdvrG27jNpQ3QTulMr?p=preview

I want the green area to fill the remaining available height. I can set div height:100% and get almost I want, but that is less than desirable.

Is there a way to do this with css? Do I need to do some sort of resizing via js?

Answer 1

I've set the following classes to height: 100% and it seems to work now:

.tabset, .tab-content, .tab-pane, .tabbable {
  height:100%;
}

Updated Plunker

Answer 2

if you use flexbox layout you can do it this way:

override the display property of the '.tab-content>.active' class. By default it is set to 'display: block'. It has to be set to 'display: flex'. Also modify the tab template.

See my solution:

Using flexbox layout with angular-ui tabs

Answer 3

The easiest way that I know is to set the height with vh units. They were introduced in CSS3

height: 100vh;

Updated plunker.

vh unit is setting the viewport height. I believe it's viewed as setting it to a % of the viewport, or visible screen. So simply changing 100% to 100vh gives you the desired outcome.

It seems like it's pretty widely used: http://caniuse.com/#search=vh. Just depends on who your audience base is I suppose.