SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member Kalirion's Avatar
    Join Date
    Sep 2003
    Location
    Reston, VA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it possible for a div's height to take up all "remaining" height in the parent?

    I want to have a div with a percentage height contain two other divs: one with a fixed height, and one which takes up all of the remaining height of the parent div. So for example, if the parent div's height of 50% turns out to be 500px, and the fixed height of one child is 50px, the second child's height would be 450px. Is this possible?

    Thanks in advance!
    Kalirion

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is probably not what you meant (but it's getting late).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    html,body {height: 100%;}
    body {
     margin: 0px;
     padding: 0px;
    }
    .outer {
     height: 50%;
     width: 300px;
     background:yellow;
     border:1px solid #000;
    }
    .fixed {
     height:100px;
     background:red;
     border:1px solid #000;
    }
    -->
    </style>
    </head>
    <body>
    <div class="outer">
    <div class="fixed">Fixed</div>
    Stretch
    </div>
    </body>
    </html>
    Paul

  3. #3
    SitePoint Member Kalirion's Avatar
    Join Date
    Sep 2003
    Location
    Reston, VA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Paul O'B!
    What I meant though is for there to be another div inside of "outer", immidiately following "fixed", and for this second div's visible size to be limited to whatever height of "outer" not taken up by "fixed." So the layout would be something like the following code, but "outer" would remain being 50% of full height, and "stretch" would scroll.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    html,body {height: 100%;}
    body {
     margin: 0px;
     padding: 0px;
    }
    .outer {
     height: 50%;
     width: 300px;
     background:yellow;
     border:1px solid #000;
    }
    .fixed {
     height:100px;
     background:red;
     border:1px solid #000;
    }
    
    .stretched {
     	overflow: auto;
    }
    -->
    </style>
    </head>
    <body>
    <div class="outer">
    	<div class="fixed">Fixed</div>
    	<div class="stretched">
    		Stretch<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    		Stretch
    	</div>
    </div>
    </div>
    </body>
    </html>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Couldn't come up with a solution I'm afraid, perhaps someone else could suggest something, although I think the mixing of fixed sizes and percentages is probably too much for the css.

    The nearest I came up with was this wonderful invention. (not a lot of use but it looks fun).
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    html,body {height: 100%;}
    body {
     margin: 0px;
     padding: 0px;
    }
    .outer {
     position:relative;
     height: 50%;
     width: 300px;
     background:yellow;
     border:1px solid #000;
    overflow: auto;
    }
    .fixed {
     height:100px;
     background:red;
     border:1px solid #000;
    }
    .stretched {
    height:100%;
    overflow:auto;
    }
    -->
    </style>
    </head>
    <body>
    <div class="float"></div>
    <div class="outer">
     <div class="fixed">Fixed</div>
     <div class="stretched">
      Stretch<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      Stretch
     </div>
    </div>
    </div>
    </body>
    </html>
    Paul


Bookmarks

Posting Permissions

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