Cetanu Posted March 17, 2010 Share Posted March 17, 2010 I wanted to set the height of a <div> equal to 100% of the entire page, NOT the viewport. I want the container to extend all the way down. Basically, the page is set up in a two column format. The column on the left has a BG color and the one on the right doesn't. If the right's content goes farther than the view, the left column doesn't follow. Here is a link that I've hosted on file sharing. It isn't live or anything... http://dl.dropbox.com/u/3666815/portfolio/test.html Thanks in advance!! CSS: *{ margin:0; padding:0; } html, body{ min-height:100%; } body{ background: #fcfef5 url("images/bg/rightBG.png") no-repeat; background-position:top right; word-spacing: .1em; color: #555; width:100%; font-family: georgia, garamond, times new roman; } /* Text */ #right_text p { font-size:12px; width:70%; z-index:0; position:relative; margin:auto; text-indent:15px; margin-top:5px; } /* end TEXT */ /* Links */ a img{ border:none; } #links a{ color:#999; text-decoration:none; } #links a:visited{ color:#555; } #links a:hover{ color:#889d46; } #links a:active{ color:#000; } /* end LINKS */ /* Containers */ #left_Area{ background: #d8dec3 url("images/BG/leftBG.png") no-repeat; background-position: top right; float:left; width:50%; min-height:100%; } #header{ width:100%; padding-top:237px; } #links{ width:100%; text-align:right; margin-right:10px; } #right_text{ float:left; position:relative; z-index:0; width:45%; padding-top:250px; } #introBox{ width:10px; margin-top:200px; display:block; opacity:.1; height:10px; background: #d8dec3 ; } /* Inner Containers */ #treeBG{ width:100%; height:235px; background: url("images/bg/treeBG.png") no-repeat; background-position:bottom left; } #mainLinks{ width:80%; margin:auto; padding:15px; } /* end INNER CONTAINERS */ /* Links List */ #links ul{ list-style:none; padding:10px; } #links li{ padding:10px; background: #d8dec3; margin:5px; -moz-border-radius: 10px; z-index:1; position:relative; color: #889d46; font-family:tahoma ms, verdana; font-size:13px; } /* end LINKS LEST */ /* Images */ .mainHeader{ margin:10px; } #mainImg{ margin: 10px 20px; } /* Classes */ .clear{ clear:both; } HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Website coded By ZACH! --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Zach W Portfolio - Grade 10 Section</title> <link rel="stylesheet" href="styleFF.css" type="text/css"/> <script> function roll_over(img_name, img_src) { document[img_name].src = img_src; } </script> <script src="jquery/doc.js" type="text/javascript"></script> <script> $(document).ready(function(){ $('li').mouseenter(function(){ $(this).animate({ width:'135%', opacity:'.92' }, 'slow' ); }); $('li').mouseleave(function(){ $(this).animate({ width:'96%' }, 'fast' ); }); $('a').click(function(){ $('body').fadeOut(); }); }); </script> </head> <body> <div id="left_Area"> <div id="header"></div> <div id="links"> <ul> <li><a href="index.php">BACK TO <br/> DIRECTORY </a> </li> <li><a href="">Goals</a></li> <li> Skills Analysis </li> </ul> </div> <div id="treeBG"></div> </div> <div id="right_text"> <p> I came to TVHS on February 2nd, 2009, and I absolutely love the school. I approach the end of the first half of my high school career, and this portfolio will display some work that I’ve done in my four months at Tech Valley High. The portfolio will also be an exhibit for my possible future, and a medium for me to display my skills. </p> <p>Well, I’ve grown up in New York State, though this hasn’t inhibited me from experiencing the culture of other parts of the world and the country. My Mom, brother, and I all live together; my Dad lives a mere 30 minutes from my house. At this point, I’ve taken four years of Spanish, four months of (unofficial) Chinese, and I can speak little bits of a whole bunch of other languages (including English). I love to draw, and since I was little I’ve loved to read and write as well. It’s my goal to learn how to use the English language properly (as convoluted as it is). I don’t have any idea what I want to do when I grow up. Currently, I work at the Rensselaerville Library and I take traditional Okinawan Karate. Among my other interests are: tennis, wildlife, Eastern philosophy, and web design. </p> <p>There are probably more things than I realize that have shaped who I am now, but I can recall a few. My exposure to horror movies at a young age definitely drove me to draw and write because I seek to release a lot of creativity when I do those things…I assume that the horror movies are fueling my imagination. Another thing would be my grandmother (matrilineal) who literally had a library of books and a wealth of knowledge. Being exposed to knowledge as a child has proved to perpetually fuel my desire for knowing things now. I can’t recall anything else, except my constant exposure to the world and knowledge. </p> <p> As I continue through high school I develop more and more goals. I’m happy to say that being at TVHS has allowed me to prepare adequately for the working place. One goal that I have now is to learn to speak and write Chinese fluently! I wouldn’t have this goal if I hadn’t been exposed to Chinese here. I also want to travel all over the world to see ancient sites and artifacts before they are destroyed by the escapades of humans. That goal wasn’t influenced by the school I’ve had it for awhile. I have no idea what college I want to go to, but I know that I want to go. I might want to be an artist—maybe an author – maybe a webmaster…I won’t know for a little bit. </p> <p> I think my definite skills are tech literacy, self-direction, and critical thinking. I’ve been able to create websites and pictures for the yearbook; almost all of my homework has been done on time, save for a few instances and my self-direction grade is my highest grade. In this portfolio, you’ll see a drawing I did for the yearbook and many projects that I’ve done over the year, all of which will accentuate my skills. </p> </div> <div id="clear"></div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/195520-widespread-issue-help/ Share on other sites More sharing options...
haku Posted March 17, 2010 Share Posted March 17, 2010 You can do this with the faux columns method, requiring no javascript. Quote Link to comment https://forums.phpfreaks.com/topic/195520-widespread-issue-help/#findComment-1027695 Share on other sites More sharing options...
Cetanu Posted March 20, 2010 Author Share Posted March 20, 2010 You can do this with the faux columns method, requiring no javascript. Could you help me along with this? I've not used JS for the column... I didn't know I could. Quote Link to comment https://forums.phpfreaks.com/topic/195520-widespread-issue-help/#findComment-1028855 Share on other sites More sharing options...
haku Posted March 20, 2010 Share Posted March 20, 2010 You don't need to use javascript. That's the point of faux columns. Google it - you can find lots of info on it, and I'd just be re-typing it here. Quote Link to comment https://forums.phpfreaks.com/topic/195520-widespread-issue-help/#findComment-1028866 Share on other sites More sharing options...
Cetanu Posted March 21, 2010 Author Share Posted March 21, 2010 You don't need to use javascript. That's the point of faux columns. Google it - you can find lots of info on it, and I'd just be re-typing it here. Okay, thanks...I think I got it. Quote Link to comment https://forums.phpfreaks.com/topic/195520-widespread-issue-help/#findComment-1029745 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.