CODEWITHSUNDEEP
htmlcss
peter
peter

Reputation: 1049

How to fix <div> height

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>

Upvotes: 2

Views: 15114

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206111

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>

Upvotes: 4

intcreator
intcreator

Reputation: 4414

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.

Upvotes: 0

Kagan Agun
Kagan Agun

Reputation: 589

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.

Upvotes: 0

Related Questions