Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make a DIV's height 100%...

    i have a layout with a header, content area, right sidebar, and a footer.

    The height of the content area expands to fit the text on the page.

    When the content area is longer than the sidebar, the sidebar background stops repeating and leaves a blank area until it reaches the footer of the page.

    Can someone please help me do this? It's probably easy but I haven't been able to find help elsewhere...

    Thanks!

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Source code and a link to your site would help us understand your problem better
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry completely forgot...

    you can copy and paste this code and see exactly what I am talking about...

    style.css
    Code:
    body {
    	text-align: center;
    }
    
    #wrapper {
    	width: 940px;
    	margin: 0 auto;
    	text-align: left;
    }
    
    #header {
    	height: 100px;
    	border: 1px solid red;
    }
    
    #content {	
    	width: 735px;
    	border: 1px solid blue;
    	float: right;
    }
    
    
    #left_sidebar {
    	width: 200px;
    	float: left;
    	padding-top: 20px;
    	padding-bottom: 20px;
    	border: 1px solid orange;
    }
    
    #left_sidebar li {
    	padding-left:20px;
    	padding-right: 20px;
    }
    
    #footer {
    	height: 100px;
    	border: 1px solid brown;
    }
    
    
    .clear { clear: both; }
    index.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    
    <div id="wrapper">
    
    <div id="header">
    header
    </div>
    
    <div id="content">
    	<p>
    	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    	Why do we use it?
    	</p>
    	<p>
    	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    	Why do we use it?
    	</p>
    </div> 
    
    <div id="left_sidebar">
    	navigation<br/>
    	navigation<br/>
    	navigation<br/>
    	navigation<br/>
    	navigation<br/>
    </div>
    
    <div id="footer" class="clear">footer</div>
    
    </div>
    </body>
    </html>

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #5
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    or just replace your left_sidebar with this

    Code:
    #left_sidebar {
    	width: 200px;
    	float: left;
    	padding-top: 20px;
    	padding-bottom: 9999px;
    	margin-bottom: -9999px;
    	border: 1px solid orange;
    }
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style>
    body {
    	text-align: center;
    }
    
    #wrapper {
    	width: 940px;
    	margin: 0 auto;
    	text-align: left;
    }
    
    #header {
    	height: 100px;
    	border: 1px solid red;
    }
    
    #content {	
    	width: 735px;
    
    	border: 1px solid blue;
    	float: right;
    }
    
    
    #left_sidebar {
    	width: 200px;
    
    	float: left;
    	padding-top: 20px;
    	padding-bottom: 17.9%;
    	border: 1px solid orange;
    
    }
    
    
    
    #footer {
    	height: 100px;
    	border: 1px solid brown;
    }
    
    .clear{clear:both}
    
    </style>
    </head>
    <body>
    
    <div id="wrapper">
    
    <div id="header">
    header
    </div>
    
    <div id="content">
    	<p>
    	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    	Why do we use it?
    	</p>
    	<p>
    	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    	Why do we use it?
    	</p>
    </div> 
    
    <div id="left_sidebar"  >
    	navigation<br/>
    	navigation<br/>
    	navigation<br/>
    	navigation<br/>
    	navigation<br/>
    </div>
    
    <div id="footer" class="clear">footer</div>
    
    </div>
    </body>
    </html>
    I have no clue how that's supposed to work. How were you expecting the heights to be established? I just added padding to the bottom of the div.

  • #7
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    well that code you just posted script doesnt work. I just tested it.
    Granted it looks fine if you dont try to space out your paragraphs by hitting enter, but when i did (link below)
    http://www.habugfx.com/test/script.html

    Where is mine does

    http://www.habugfx.com/test/test.html

    You also may want to look in to using html colour codes cause brown isnt a valid colour value.

    http://jigsaw.w3.org/css-validator/v...ning=1&lang=en
    Last edited by PitbullMean; 03-06-2009 at 06:01 AM.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #8
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by PitbullMean View Post
    well that code you just posted script doesnt work. I just tested it.


    Where is mine does

    http://www.habugfx.com/test/test.html
    Works in FF
    What's up with IE? I don't even open that craptastic browser.
    Oh, it's close. needs an adjustment. It certainly DOES work.

  • #9
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    your left div is cutting into the footer pitbull

  • #10
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    pitbull's site has tons of better examples anyway. great site dude!

  • #11
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    thanks
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by tbarbedo View Post
    i have a layout with a header, content area, right sidebar, and a footer.

    The height of the content area expands to fit the text on the page.

    When the content area is longer than the sidebar, the sidebar background stops repeating and leaves a blank area until it reaches the footer of the page.

    Can someone please help me do this? It's probably easy but I haven't been able to find help elsewhere...

    Thanks!
    Hello tbarbedo,
    Faux Columns would work for you. Have a look at a demo of mine at http://nopeople.com/CSS/3-column/index.html If you look in the CSS you'll see the line background: url(bg.jpg) repeat-y; loading an 804px by 2px background image that looks like the columns when it's repeated. Any one of the three columns can expand that so they are always the same length.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by TinyScript View Post
    your left div is cutting into the footer pitbull
    To show you why, have a look at that pitbullmean's attempt but with colors added:
    Code:
    body {
    	text-align: center;
    }
    
    #wrapper {
    	width: 940px;
    	margin: 0 auto;
    	text-align: left;
    	overflow:hidden;
    }
    
    #header {
    	height: 100px;
    	border: 1px solid red;
    }
    
    #content {	
    	width: 735px;
    	border: 1px solid blue;
    	float: right;
    }
    
    
    #left_sidebar {
    	width: 200px;
    	float: left;
    	padding-top: 20px;
    	padding-bottom: 9999px;
    	margin-bottom: -9999px;
    	border: 1px solid orange;
    background: #000;
    }
    
    #left_sidebar li {
    	padding-left:20px;
    	padding-right: 20px;
    }
    
    #footer {
    	height: 100px;
    	border: 1px solid brown;
    background: #f00;
    }
    
    
    .clear { clear: both; }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    New Coder
    Join Date
    Feb 2009
    Location
    Texas
    Posts
    56
    Thanks
    6
    Thanked 3 Times in 3 Posts
    There is an easy, no coding way, you need to make an image, you can make it the background repeating on the y axis.

    Say, you had two divs, one floating left, and the other filling in the other space, what you do is if the floated div is 100px, on your image, you make the left side 100px, with the color of your choice, and the right side, the width of the other div, and set it as a background....
    Free PSD to XHTML/CSS conversion - Dimby.net
    Which doctype should I use?

  • #15
    New Coder
    Join Date
    Jan 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Camron.. I have background images on all of those divs...
    I also have the sidebar background repeating-y

    Excavator...
    Your way works but only if using a set color for the background..i have bg images and the last 10px on the edge of the image has some transparency which lets the bg show through...

    Pitbull...
    When I tried setting the margin and padding to crazy numbers like 9999px..it overflows down the page over the footer...tried to use overflow:hidden with no luck...


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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