www.webdeveloper.com
Results 1 to 6 of 6

Thread: Set div height as percentage of window

Hybrid View

  1. #1
    Join Date
    Feb 2009
    Posts
    124

    Set div height as percentage of window

    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>

  2. #2
    Join Date
    Feb 2009
    Posts
    124
    Sorry that should be 80&#37;/20%

  3. #3
    Join Date
    Sep 2006
    Location
    new york
    Posts
    254
    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.

  4. #4
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    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.
    Last edited by PBSWebDesign; 04-21-2012 at 06:47 PM.
    ----------------------------------------------------------------------------------------------
    WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com

  5. #5
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    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&#37; 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.
    Last edited by PBSWebDesign; 04-21-2012 at 07:00 PM.
    ----------------------------------------------------------------------------------------------
    WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com

  6. #6
    Join Date
    Mar 2011
    Posts
    1,109
    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.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles