Set div height as percentage of window

**ttmt** · 04-21-2012 08:30 AM

Set div height as percentage of window

Hi all

I know this is simple but I just can't work it out.

I have two div's in a wrapping div. I want to set the two div's height as a percentage of the window.

I have set the html/body's height to 100% and the wrapping div to min-height:100%;

http://www.ttmt.org.uk/forum/css/

How can I set the top div to 80% of the height and the bottom to 30%

Code:

<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
  
  <style type="text/css">
    html, body{
      height:100%;
    }
    #wrap{
      min-height:100%;
    }
    #top{
      background:red;
      height:80%;
    }
    #bottom{
      background:#eee;
      height:30%;
    }
  </style>
  
  </head>
  
<body>
  
  <div id="wrap">
    
    <div id="top">
      <h1>top</h1>
    </div>
    
    <div id="bottom">
      <h1>bottom</h1>
    </div>
    
  </div><!-- #wrap -->

</body>

</html>

**ttmt** · 04-21-2012 09:39 AM

Sorry that should be 80%/20%

**auntnini** · 04-21-2012 04:57 PM

Might this help?

http://www.w3schools.com/jsref/prop_style_height.asp

The height property has effect only on block-level elements or on elements with absolute or fixed position. The overflowing content can be manipulated with the overflow property.

**PBSWebDesign** · 04-21-2012 06:43 PM

The height property has effect only on block-level elements or on elements with absolute or fixed position. The overflowing content can be manipulated with the overflow property.

A div is a block level element. The height attribute does apply.

Also why are you referencing JavaScript page inside of CSS? That link has nothing to do with css and shouldn't be used as a reference as to why something in css isnt working. Thats like saying take a look at how this applies in PHP while you are trying to solve a C# problem. Not trying to be mean but thats basically the equivalence.

**PBSWebDesign** · 04-21-2012 06:33 PM

In order for this to work the wrapper itself needs to have a set height. Not in percentages but in px's. So set it to something like 800 and then you can use the min-height: property to get the desired result. Without the wrapper having a set height in tangible numbers then the child elements such as your div's will be trying to scale to 30% of nothing because there is no number set to it. With it being set to a defined height in numbers it can effectively be set to be 20% and 80% of the parent element in this case the wrapper.

So set the min-height of the wrapper so that if you go over that height that is fine it will just keep expanding and then set the divs with min height as well just in case you go over what you are wanting.

**rtrethewey** · 04-21-2012 09:50 PM

You can use a percentage on your <div>s. Try:

Code:

  <style type="text/css">
    html, body{
      height:100&#37;;
    }
    #wrap{
      height:100%;
      min-height:100%;
    }
    #top{
      background:red;
      height:80%;
    }
    #bottom{
      background:#eee;
      height:20%;
    }
  </style>

Setting 'min-height' is not the same as setting 'height'. Without setting 'height' on #wrap, your internal <div>s don't have a reference for setting their own height as a percentage. I also changed #bottom to 20% so that the total of the two was 100%. While you can use 30%, it makes the document exceed the size of the browser window and I'm not sure that's what you wanted.

Thread: Set div height as percentage of window

Thread Tools

Display

Hybrid View

Set div height as percentage of window

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions