javascript - How to apply a responsive CSS height to an element using minmax-height and height? - Stack Overflow

admin管理员组

文章数量:1323035

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

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

• javascript
• html
• css
• responsive-design

Share Improve this question Follow edited Aug 5, 2014 at 16:17 frequent asked Aug 5, 2014 at 16:11 frequentfrequent 28.5k6161 gold badges187187 silver badges336336 bronze badges 4

• which height do you like the graph to have? To you want it to be 100% of the browser client height? Update: I just re-read your question: you want the Graph to be 100% (height and width) of it's parent container. How do you set the size of .graph_wrap? – Nico O Commented Aug 5, 2014 at 16:20
• expanding to available dimensions would be nice. I can hardcode a value like 20em and change this with media queries but the graph will be inside a flexible grid (x*y), so scaling according to width would be nice. – frequent Commented Aug 5, 2014 at 16:22
• You wrote "or by specifying an absolute container" you can insert an absolute container in your grid like this: jsfiddle/NicoO/7268J would this do what you need? Or do you need a value after all? If so, check out viewport units vw and wh. But those are not relative to your grid. – Nico O Commented Aug 5, 2014 at 16:29
• Where does .ui-graph e from? I don't see it in the examples, and it's not in your HTML snippet – Radley Sustaire Commented Aug 5, 2014 at 16:49

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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.

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.

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;
}

本文标签： javascriptHow to apply a responsive CSS height to an element using minmaxheight and heightStack Overflow