Jump to content


How to get a div to fill the remainder of space left

  • Please log in to reply
No replies to this topic

#1 iPixel


    Young Padawan

  • Members
  • Pip
  • 19 posts

Posted 05 September 2012 - 11:54 AM

Basically i have 3 divs... header, graph, bottom. (names aren't important).
My issue is extending the bottom div to fill in the remaining gap between the bottom of graph and the bottom of the browser.

Here's my sad CSS.

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { padding:0px; margin:0px; }
html, body { height:100%; width:100%; }
#header { width:100%; height:23px; background:#000; }
#graph { width:100%; height:300px; background:#e7e7e7; }
#bottom { width:100%; height:100%; background:#FFC; }
<div id="header">
</div><!-- //header -->
<div id="graph">
</div><!-- //graph -->
<div id="bottom">
</div><!-- //bottom -->

Thanks for any help!

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users