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.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Issue with 100% div height

    My content area currently scales the page down if the content overflows from it. This is great, and exactly what I want.

    The issue is that when the content doesn't reach the footer, the div's height only matches it's content. I want it to reach the footer at all times (this means it has to be 100% of the page-container div - see diagram below).

    All divs from #content and up to #page-contain have their min-height and height set to 100%. The only way I've managed to actually change the height of the div to a set height (not in percentage) and add overflow:hidden - neither of which I want, as the page should scale with resolution.

    ----------------

    I've got a rather complicated site set up, with a whole bunch of divs and div containers. I've got them all there for a reason, so there are only 1 or 2 of these which I can maybe get rid of.

    I'll try to lay it out for you.

    • page-container - contains everything except the footer (raised with a negative margin for the footer).
      • header
      • widthset - this is because some pages have 100% width and some have less. basically it sets the width of the menu/content area.
        • menu
        • content-contain - I tried setting this up right now to fix this issue. Didn't really help.
          • content
    • footer - (outside the page-container div)


    I have colored the divs in my site so you can better understand where everything is, the colors are: #page-contain #widthset #content-contain, while #content remains it's natural light grey.

    Check the "about" page and click on the headers. They will scale down and show you how the site currently responds to overflow.

    Here are links for your comfort:

    1. THE WEBSITE
    2. THE CSS FILE



    Thanks in advance for you time, this has really been driving me crazy for the past couple of days.

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Something like a sticky footer? The footer sticks to the bottom of the page if the content doesn't reach it, but when the content is long enough the footer flows beneath the content as the page scrolls?

    The catch is that you kind of have to start with the template and build your site around it. I've not had much success trying to incorporate it retroactively into sites I've already made, at least.

    Here's a gutted template I made, if you're interested in just the basics:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    
    	<title>Template 14</title>
    
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
    	<style type="text/css">
    	
    		* {
    			margin: 0;
    		}
    
    		html, body {
    			height: 100%;
    		}
    
    		.wrapper {
    			background:#ccc;
    			min-height: 100%;
    			height: auto !important;
    			height: 100%;
    			width:500px;
    			margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
    		}
    
    		.footer, .push {
    			height: 142px; /* .push must be the same height as .footer */
    		}
    		
    		.footer {
    			background:#eee;
    			width:500px;
    			margin:0 auto;	
    		}
    		
    	</style>
    
    </head>
    <body>
    
    	<div class="wrapper">
    
    		<div class="header">
    			<h1>CSS Sticky Footer</h1>
    		</div>
    			
    			<p>Content goes here.</p>
    			
    		<div class="push"></div>
    
    	</div>
    
    	<div class="footer">
    		<p>Footer goes here.</p>
    	</div>
    
    </body>
    </html>
    Edit: Looks like you already have a form of the sticky footer. I'm probably misunderstanding your question--my mistake.
    matt | design | blog

  • #3
    New Coder
    Join Date
    Jul 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey, thanks for the try :P But yeah, I've already got something like that sticky footer integrated. The issue is that I want my content div (with the grey background) to always scale down until it reaches the footer - even when the content isn't enough to reach it.

    Any idea?

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Ah. If the div is a fixed width, you might consider a faux column placed as a background on the html or body tag and repeated-y.
    matt | design | blog

  • #5
    New Coder
    Join Date
    Jul 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That's the thing, the div is only a fixed width on some pages. On others (portfolio), the div is set to become wider using javascript. Thanks for the tip, though, it might help me on another site I'm planning at the moment

    Any idea how I can scale the div to 100% regardless of content and have it push the div down when content passes it? As in, an actual min-height of 100%.


  •  

    Tags for this Thread

    Posting Permissions

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