Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Old 06-26-2009, 07:39 PM 100% Height Issue
Experienced Talker

Posts: 30
Trades: 0
I am trying to create page with a fixed height header (80px), a body that expands to fill the page and a footer that sticks on the bottom.

Unfortunately, I don't have enough content to cover the whole page but I want to create a shadow border effect for the body that runs from the header to the footer which is stuck on the bottom.

I have the footer stuck on the bottom with a div wrapper around all of the page except the footer which is then pushed to the bottom with a "push" div and then wrapped in its own.

Everything works except I can't get the background-image for the body to stretch vertically all the way to the footer.
samo1215 is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 06-26-2009, 07:51 PM Re: 100% Height Issue
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Did you read our stickies ?
http://www.webmaster-talk.com/css-fo...l-browser.html

Are you using floats ? Have you CLEARED the floats ?

Have you got a URL where we can see it ?
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 06-26-2009, 10:39 PM Re: 100% Height Issue
Experienced Talker

Posts: 30
Trades: 0
I promise I read the sticky and even did a search here and I still can't get it to work. I don't have a url as I am only working on it locally. The code is pretty lengthy so I am going to post an abbreviated version below:

HTML
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" lang="en">

    <head>
        <title>My Website</title>
        <link href="main_style.css" type="text/css" rel="stylesheet" />
        <meta http-equiv="content-type" 
            content="text/html;charset=utf-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
    </head>

    <body>
    
    
        <div class="wrapper"> <!-- Document Container For Maintaining Static Footer -->
            
            
            
            <div id="header"> <!-- Header -->
            
                <div id="headerwrap">
                    
                    <div id="logo"><img src="images/logo.png" alt="Logo" /></div>
            
                    <div id="navcontainer">
                        <ul id="nav">
                            <li id="home-nav"><a href="index.html" rel="tag">Home</a></li>
                            <li id="aboutus-nav"><a href="aboutus.html" rel="tag">About Us</a></li>
                            <li id="portfolio-nav"><a href="portfolio.html" rel="tag">Portfolio</a></li>
                            <li id="foundation-nav"><a href="foundation.html" rel="tag">Foundation</a></li>
                            <li id="contact-nav"><a href="contact.html" rel="tag">Contact</a></li>
                        </ul>
                    </div>
            
                </div>
            
            </div> <!-- End Header-->
            
            
            <div id="contentcontainer"> <!-- Content -->
            
                <div id="contentband">
                    
                    <div id="maincontent">
                        <h2>Welcome</h2>
                        <p>insert a bunch of text here</p>
                    </div>

                    
                    <div id="news">
                        <h3>News</h3>
                        <p>insert a bunch of text here</p>
                    </div>
                    
                    
                    <div id="searchbar">
                        <h3>Search</h3>
                        <!-- Insert Google Custom Search -->   
                    </div>
                    
                    
                    <div id="propertyslideshow">
                        <h3>See Our Portfolio</h3>
                        <!-- Insert Javascript Slideshow -->
                    </div>
                    

            
                </div>
            
            </div> <!-- End Content -->
            
            
            <div class="push"></div> <!-- Keeps Footer On Bottom Of Page -->
        
        
            </div> <!-- Closing Wrapper Div -->
        
        
        <div id="footer"> <!-- Footer -->
            
            <p>
                <a href="#">Disclaimer</a>
                |
                <a href="#">Terms &amp Conditions</a>
                |
                <a href="#">Site Map</a>
                |
                <a href="#">Contact Us</a>
            </p>
            
        </div> <!-- End Footer -->
    
    </body>

</html>
CSS
Code:
* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}

#footer, .push {
    height: 100px; /* .push must be the same height as .footer */
}
I am planning on using some floats to get the logo, navigation bar and content items into place. If the code is really pertinent I'll add it to my post but my stylesheet is pretty long.
samo1215 is offline
Reply With Quote
View Public Profile
 
Old 06-27-2009, 11:03 AM Re: 100% Height Issue
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Ok, but you didn't answer my other question - are you using floats and are you CLEARING the floats ? If you don't clear the floats inside it, the #wrapper isn't going to stretch or 'wrap' it's contents.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 06-27-2009, 03:16 PM Re: 100% Height Issue
Experienced Talker

Posts: 30
Trades: 0
I am clearing the floats I am using. I have a container around the content section which I use a "clear: both" to get rid of any floats in the header. Then everything in the footer is in a footer container which also contains a "clear: both".

I was playing around with my code last night and I think I might have solved it but I'm worried my fix is more of a hack.

I put the body shadow image in the .wrapper class and then in the html I put a div above the .wrapper container with the very top sliver of the image I'm using. So far it looks like it works but I'm worried if somebody has a really tall screen and I have a page with a limited amount of content that it might not stretch properly.

Can anybody guess if this might fall apart on me?
samo1215 is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to 100% Height Issue
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.56557 seconds with 12 queries