Height of the div is not proper when resizing the window

Question

i have a div inside the html page as below,

 <html>
    <head>
      <script>..</script>

    </head>
    <body>
    <div> </div>

    </body>
    </html>

i need to load a chart inside the div using the script , before loading the chart the height of the div is 0, so i have assigned 450 as the initial height. the chart renders correctly. But when i resize the window, the width of the div is changed according to the window size, but the height of the div is always 450.

how to change the height of the div with respect to window size.

Another doubt:

Only after a content is loaded in div, we can get the height of the div?

Thanks in advance.

Please explain what you mean by chart, is it an image or an iframe? — Varinder, Mar 04 '14 at 05:43
So to clear things up, you want the div containing the content to increase when the window height increases and decrease when the window height decreases right? — Joshua Kissoon, Mar 04 '14 at 05:59

score 0 · Answer 1 · answered Mar 04 '14 at 05:43

0

Use max-height property.

Like: max-height:450px;

It will help you

answered Mar 04 '14 at 05:43

Anand Jaju

458
3
12
28

score 0 · Answer 2 · answered Mar 04 '14 at 05:44

0

Are you setting the height in pixels? If so, 450 pixels is 450 pixels. Try setting it to a % instead.

<body style="height: 100%">
   <div style="height: 100%"></div>

answered Mar 04 '14 at 05:44

VtoCorleone

16,813
5
37
51

Joshua Kissoon · Answer 3 · 2014-03-04T05:50:41.143

0

You need to use

min-height: 450px;   // Set the minimum height
height: 100%;        // Set the div to resize according to the window height

Using height will keep the div's height fixed no matter what the window height is, that's why you use min-height. Then to let the div grow with the window height, use height: 100% or whatever percentage of the window height you need the div to be.

Note: since your div is ultimately in your html and body tags, you also need to set their height so to take the full window height:

html, body
{
    height: 100%;
}

Here is an example: http://jsfiddle.net/qvQw9/

For your second question, to get the height of div, at any time, you need to use javascript:

var divHeight = document.getElementById('divId').clientHeight;

edited Mar 04 '14 at 05:50

answered Mar 04 '14 at 05:45

Joshua Kissoon

3,269
6
32
58

Hey @AnandJaju, height will make it remain the same, not min-height. checkout the example fiddle I added. – Joshua Kissoon Mar 04 '14 at 05:52
by min-height property it will keep minimum height of that div 450px and as content increases it will increase its height. if content is less it will not reduce its height.. – Anand Jaju Mar 04 '14 at 05:55
That's right, but the question asks "how to change the height of the div with respect to window size" not with respect to content height. – Joshua Kissoon Mar 04 '14 at 05:57
his question is not clear that he wants the div height should be decreased or increased.. and mostly whenever we resize the window means we are decreasing the window size from full screen.. – Anand Jaju Mar 04 '14 at 05:58
both on increasing and decreasing the window size, the height of the div should change. – user3326265 Mar 04 '14 at 06:42
Well this will work for you, check the jsfiddle link, I have a working example there. http://jsfiddle.net/qvQw9/ – Joshua Kissoon Mar 04 '14 at 07:01

score 0 · Answer 4 · answered Mar 04 '14 at 05:56

You can use min-height property it will force the div to be set at that minimum height and also you can set max-height property so that you can set maximum height of the div as per requirement.

For your second question you can also get the height of the div as:

<div id="testDiv" style="height:200px"></div>

Script:

alert($("#testDiv").height())

with this you can get the height of the div where you want to.

score 0 · Answer 5 · edited May 23 '17 at 10:31

Heres one way to go about it ( if you know aspect ratio of your media element )

The idea is to style a div which is fluid in the sense that it matches media elements aspect ratio, i mentioned it here and there

Below will put you in right direction

HTML

<div class="fluid-wrapper">
    <img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" />
</div>

CSS

.fluid-wrapper {
    height:0;
    overflow:hidden;
    position:relative;
    padding-bottom:100%;
}

.fluid-wrapper > img {
    position:absolute;
    display:block;
    width:100%;
}

Heres a quick fiddle to elaborate the point: http://jsfiddle.net/Varinder/PuF2n/1/

More examples here: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Height of the div is not proper when resizing the window

5 Answers5