CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
frequent
frequent

Reputation: 28513

How to apply a responsive CSS height to an element using min/max-height and height?

I'm trying to expand a Dygraph to the maximum available dimensions of it's parent container.

Technically the graph is resizeable, either by using a re-rendering method or by specifying an absolute container like in this example.

Problem is, the plugin expects hardcoded values, otherwise it will calculate something arbitrary - see this link for explanation, which says:

  // For historical reasons, the 'width' and 'height' options trump all CSS
  // rules _except_ for an explicit 'width' or 'height' on the div.
  // As an added convenience, if the div has zero height (like <div></div> does
  // without any styles), then we use a default height/width.

I have been playing around with the following setup:

<div class="graph_wrap">
  <div class="graph_container">
     <!-- graph will be here -->
  </div>
</div>

I managed to stretch the graph WIDTH to 100% by setting this CSS:

html .ui-graph {
  width: 100%;
  min-width: 1px;
}

but without specifying a height, the plugin overrides my CSS and doing this:

html .ui-graph {
  width: 100%;
  min-width: 1px;
  /* height... */
  height: auto;
  max-height: 100%;
  min-height: 100%;
}

does not work. Only if I add something like height: 20em, the plugin does not overwrite my set CSS.

Question:
Is there any CSS way using min/max-height/height (or other) to force the browser to expand to maximum height? Can't think of anything else. does

Upvotes: 1

Views: 15819

Answers (3)

Radley Sustaire
Radley Sustaire

Reputation: 3399

In the resize-to-browser example you provided, the element is scaling to the parent container just as you wanted. You can then apply your sizing rules to the container (#div_g), not the graph itself.

In that example, adding this will make the graph scale with the browser height until it is 300px tall:

#div_g {
    max-height: 300px;
}

All of the graph generated elements are calculated with JavaScript. That's why CSS doesn't work for them. So style the container, and let the graph itself resize it to fill that container.

You should be able to use position: relative; instead of absolute, if you want your graph to be positioned with other elements.

"Is there any CSS way using min/max-height/height (or other) to force the browser to expand to maximum height? Can't think of anything else. does"

Traditionally the height of the html document is the same height as what it contains, like any other block element. You can stretch this to fit the browser height using the following:

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

Upvotes: 1

skarchmit
skarchmit

Reputation: 459

You can do it multiple ways:

The way It looks like you are doing is having the graph stretch with the browser window.

height: 10vw; /* viewport width */

or

height: 10vh; /* viewport height*/

these are different, so experiment what you want. This will definitely resize it.

Upvotes: 2

Vikram Sharma
Vikram Sharma

Reputation: 526

There is no way to force the browser to maximum height. You can write css like 

.max_width{
width: 100%;
}

this will make the container 100%.

But the height will be determined by the height of the elements inside.

This can be solved using javascript though.

Upvotes: 2

Related Questions