How to fix
height

Question

My have a problem to make DIVs having fixed height. The following is the code. All contains some other elements except the #gridDiv. gridDiv will be attached a grid at run time. and I want the gridDiv occupy 60% of the screen no matter it has grid inside or not. And if the grid is too long to fit in the gridDiv DIV, I wish the gridDiv have a scroll bar.

Currently the gridDiv only has inline height. How can I achieve what I want? Thank you.

<div id="mainDiv" style="display: block">

    <div id="topDiv" style="display: block; height:20%; text-align:center"></div>

    <div id="bottomDiv" style="display: block; height:80%">
        <div id="gridDiv" style="display: block; height:80%"></div>
        <div id="buttonDiv" style="display: block; width:100%; height:20%; text-align:center"></div>
    </div>

</div>

You [can't give height as a percentage](http://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work) in CSS — intcreator, Aug 03 '15 at 01:07
@brandaemon yes you can, after you have set height to html and body elements. `html, body {height: 100%}` — Leo, Aug 03 '15 at 01:20
@Leo Care to demonstrate with this [JSFiddle?](https://jsfiddle.net/oxoe017s/) — intcreator, Aug 03 '15 at 01:24

Roko C. Buljan · Answer 1 · 2015-08-03T05:46:36.213

You can always use CSS3's vh (Viewport Height) unit: #gridDiv{ height:60vh; }. It'll make gridDiv 60% the viewport - no matter what (actually browser matters :) ).

First of all, don't use inline CSS cause it's hard to work with and debug. If it's for illustrative purpose - I'll use inline CSS too.
Your #mainDiv is missing height. Height relates on parent element height.
You're probably missing to define height for your document
Unless you have globally overwritten the DIV's display state, DIV is block-level element by default, so display:block; is redundant.
DIV width full width by default (auto),

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

To illustrate:

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

div{
  background: #ddd;
}

<div id="mainDiv" style="height:100%;">

  <div id="topDiv" style="height:20%;">20</div>

  <div id="bottomDiv" style="height:80%">
    <div id="gridDiv" style="height:80%">inner 80</div>
    <div id="buttonDiv" style="height:20%;">inner 20</div>
  </div>

</div>

Now back to your #gridDiv - you want it 60% the viewport height - so use 60vh height - and add overflow-y (set to scroll or auto) to add a scrollbar (for if it's content exceeds that height):

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

div{
  background: #ddd;
}

#mainDiv    {height:100%;} /* go to html, body height */
#topDiv     {height:20%}   /* 20% of #mainDiv */
#bottomDiv  {height:80%;}  /* 80% of #mainDiv */
  #gridDiv  {height:60vh; overflow-y:scroll;} /* 60% the viewport height */
  #buttonDiv{height:20%;}  /* 20% */

/*just to simulate long content*/ p{height:2000px;}

<div id="mainDiv">

  <div id="topDiv">20%</div>

  <div id="bottomDiv">
    <div id="gridDiv"><p>longContent</p></div>
    <div id="buttonDiv">inner 20</div>
  </div>

</div>

Thank all of you. These answers solve my problem. I was switch to another project, so I didn't reply you promptly. Sorry about that. — peter, Sep 15 '15 at 00:57

score 0 · Answer 2 · answered Aug 03 '15 at 01:30

the parent of the div must have an explicit height property. Otherwise the parent div height is the length of its content. Simple solution sit to set<body> element height property.

<body style="height:500px">

Then you percentages for the inline elements will work. Alternatively you can capture the browser height during run time and set to the main body element.

If you want your div scrollable then you need to add overflow:scroll property.

<div id="gridDiv" style="display: block; height:80%; overflow:scroll;">

This code works with IE11, not sure other browsers.

score 0 · Accepted Answer · answered Aug 03 '15 at 01:51

A solution with your requirements and example code:

gridDiv container must always take up 60% of the screen

Assuming your div looks like this: <div class="gridDiv"> you can use the following code:

html, body{
    height:100%;
}

.gridDiv{
    height: 60%;
}

gridDiv has a scroll bar if the content inside overflows

.gridDiv{
    overflow:scroll;
}

See the entire div with overflowing filler text on this JSFiddle.

How to fix height

3 Answers3

How to fix
height