Jump to content

Making A Div Have 100% Height Of Its Parent Div


miocene
 Share

Recommended Posts

Please check my site hereI have a div as the right column to show extra stuff on my site.Currently it is set to float:right and min-height-700px.However if the main content div is higher than 700px than the right column div does not stretch the fill it and I am left with a bit of blank space beneath it.Likewise, if I set the right-column to be more than 700px it pokes out beneath the footer and does not cause the content div to lengthen with it.How do I get it to always be the same height as the content div that contains it.

Link to comment
Share on other sites

the best way to do this is to give the illusion the right side goes down to the bottom, by using a repeating image within the outer div,.1 create two outer/wrapper divs.2 create main content, and right side bar div (with no background coluor or border(see why later).3 create a repeating image that matches the right side bar background with border, and place this in the wrapper div, and position it right, also give this div the background colour(of main body) required.4 add the content vine background image to the inner outer div.i've made a rough example below.<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">*{padding:0;margin:0;}body {margin: 10px; }p { margin-bottom: 0.9em; text-align:justify; }h1, h2, h3, h4, h5, h6 { line-height:1em;}h1 { font-size: 250%;}h2 {font-size: 225%;}h3 {font-size: 200%;}h4 {font-size: 175%;}h5 {font-size: 150%;}h6 {font-size: 125%;}#wrapper { width: 850px; border: 0px solid red; overflow:hidden; background:url(../right-border.png) right top repeat-y #37404B;}#inner { background:url(../contentvine.png) no-repeat; overflow:hidden;}#main_content { float: left; border: 0px dashed lime; width:648px; padding: 8px; }#right{width: 160px; float: right; border: 0px solid #000; margin:8px;}</style></head><div id="wrapper"><div id="inner"><div id="main_content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p></div><div id="right"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </div></div></div></body></html>edit: seemed to copy old code over? new code in bold

Edited by dsonesuk
Link to comment
Share on other sites

<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">body {background:#99C5DB url(http://fairshare.x10hosting.com/nearfrog/style/fatlines.gif) repeat fixed center top;color:#CEEBEB;margin:0;padding:0;}p { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px;}h1 {font-family:Arial,Verdana,Helvetica;font-size:0;}h2 {color:#94B3C5;font-family:Georgia,serif;font-size:24px;}h3 {color:#DAA31F;font-family:Trebuchet MS;font-size:13px;font-weight:bold;margin-top:32px;padding-left:0;text-transform:uppercase;}#header {background:#46505B url(http://fairshare.x10hosting.com/nearfrog/style/banner2.png) no-repeat scroll left center;border-bottom:1px dashed #858899;height:110px;margin:0;padding:0;}#navlist {background-color:#46505B;border-bottom:2px solid #DAA31F;height:35px;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;width:100%;}#navlist li {display:inline-block;font-family:helvetica,arial,sans-serif;font-size:19px;height:30px;margin:0;padding:6px;}#navlist a {border-style:none;color:#858899;display:block;height:30px;margin:0;padding:0 0 0 8px;width:100%;}#rightlist {float:right;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;margin-right:0;min-height:740px;padding-bottom:20px;padding-left:20px;width:150px;}#rlist {line-height:21px;list-style-image:none;list-style-position:outside;list-style-type:none;}#wrapper {margin: 0 auto; width: 850px; border: 0px solid red; overflow:hidden; background:url(../right-border.png) right top repeat-y #37404B;}#inner { background:url(../contentvine.png) no-repeat 30px 160px; overflow:hidden;}#content { float: left; border: 0px dashed lime; width:640px; margin: 0 18px; line-height:21px; }#leftshad {background:transparent url(http://fairshare.x10hosting.com/nearfrog/style/leftshad.png) repeat-y scroll left top;margin: 0 auto;width:868px;position:relative;top: 10px;}#rightshad {background:transparent url(http://fairshare.x10hosting.com/nearfrog/style/rightshad.png) repeat-y scroll right top;margin: 0 auto;width:868px;}a {border-bottom:1px dashed #3DA09B;border-color:#3DA09B;border-width:1px;color:#3DA09B;text-decoration:none;}img {border:1px dashed #CEEBEB;padding:3px;}#topban {background:transparent url(http://fairshare.x10hosting.com/nearfrog/style/topban.gif) repeat-x fixed left top;float:left;height:10px;left:0;position:absolute;top:0;width:100%;}#footer {background-color:#46505B;border-top:2px solid #DAA31F;bottom:0;height:16px;margin-left:auto;margin-right:auto;padding:0;position:relative;text-align:center;width:850px;}#footer p {font-size:8px;margin:0;padding:0;}</style></head><body><div id="topban"></div><div id="leftshad"> <div id="rightshad"><div id="wrapper"><div id="inner"><div id="container"> <div id="header"> <h1>NearFrog</h1> </div> <ul id="navlist"> <li><a style="color: rgb(255, 255, 255);" href="index.php">Home</a></li> <li><a href="about.php">About</a></li> <li><a href="portfolio.php">Portfolio</a></li> <li><a href="services.php">Services</a></li> <li><a href="contact.php">Contact</a></li> </ul> </div><div id="content"><h2>Welcome</h2> <h3>Introduction</h3> <p>Welcome to NearFrog Designs</p> <p>We are a small, independent web design company based in Wiltshire, UK. We provide excellent quality web sites for a great price! Our sites are usually simple and easy to maintain whilst being striking and visually appealing.</p> <p>All designs are catered to the client's requirements and are unique.</p> <hr /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p></div> <div id="rightlist"> <h2>Bits & Bobs</h2> <ul id="rlist"> <li><a href="#">Try Here</a></li> <li><a href="#">Or here</a></li> <li><a href="#">Or Here??</a></li> </ul> <h2>Picture</h2> <img src="http://fairshare.x10hosting.com/nearfrog/includes/woodchester.jpg" alt="picture"/> </div></div></div><div id="footer"> <p>Copyright © 2009 - NearFrog Designs</p></div></div></div></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...