CODEWITHSUNDEEP
htmlamcharts
williamvicary
williamvicary

Reputation: 805

Use 100% of remaining height

I'm creating an internal app so browser compatibility restrictions aren't a massive concern. I am using a div container that is using jquery ui resizable and therefore the size is unknown for any given div. I am also using a chart library (amCharts) which needs the parent div to have a height in order to render the chart.

The issue I'm facing is 100% within a div (with other elements in said div) means whilst the child div accepts 100% as verbatim and makes itself 100% of the parent div this isn't actually the intention - I want it to use the remaining space available in the div, rather than 100%.

I've tried table-row however that doesn't provide a height and therefore amcharts doesn't work well with any resizing (as it has no height/width to base itself on).

So I guess my question is, based on height, what is the best method of making a div use 100% of the remaining space, without JS and without using table/table-cell/table-row styles?

Edit: Here's a JSFiddle of the issue: https://jsfiddle.net/2c8n1y04/

And the HTML:

<div class="a">
    <div class="b"><h3>Header</h3></div>
    <div class="c">
        <div id="chartdiv"></div>
    </div>
</div>

Styles:

html,body,.c,#chartdiv
{
    height:100%
}

.a {
    height:300px;
    background-color: grey;
}
.b {
    background-color: yellow;
}
h3 {
    margin:0;  
}

There is also a chart added in the JSFiddle using the amcharts library, this library is dependent on a height (otherwise it renders to 0 height). Also in the code base i'm using jquery-ui resizable ui (via gridstack) which means I am unable to define a height as the chart height simply has to stretch to the full remaining height within the div.

Upvotes: 1

Views: 1077

Answers (1)

Siguza
Siguza

Reputation: 23870

Any love for Does your engine support flex?
That would in my eyes be the easiest and cleanest solution.

Apply to the parent:

flex-direction: column;
display: flex;
/* or, if a prefixed version is supported, one of: */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;

and to the child to be stretched:

flex: 1;

And you should be good to go.

Demo, if your browser supports it (click on "Full page" to see the effect)

html, body {
    height: 100%;
    margin: 0;
}
div {
    border: solid 1px #333;
    padding: 5px;
}
#a {
    margin: 10px;
    height: calc(100% - 40px);
    flex-direction: column;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
#b {
    height: 100px;
    background: #FFE;
}
#c {
    flex: 1;
    background: #EFE;
}
<div id="a">
    <div id="b">Fixed</div>
    <div id="c">Flexible</div>
</div>

But may I ask why you want a no-JS solution, since you're already using jQuery?

Upvotes: 3

Related Questions