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 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Height 100% footer problem.

    Hi,

    I was trying to create a structure for a layout. And my content's div height has to be the same length as the size of the entire page, minus the header and the footer.

    Now the problem is that my content div continues even after my footer, instead of stopping in front of it. As you can see here (the grey bars at the bottom). Any ideas on how to fix this?

    HTML-code:
    Code:
    	<div id="container">
    
    	<header>
    		<div id="headercontent">
    			<div id="sitetitle">dfjkfdke</div>
    			<div id="navigation">ajdjd akdjd adhjs dkss dksqjks</div>
    			<div id="longbar"></div>
    			<div id="headertext">slkdsfldkds</div>
    		</div>
    	</header>
    	
    	<div id="content">
    		<div id="contentleft">
    		</div>
    		<div id="contentright">
    		</div>
    	</div>
    	
    	<footer>
    		<div id="footercontent">
    			<div id="footerpart1">
    				<div id="elsewhere">sdkhfdskdfs</div>
    				<div id="feeds">dsjhfsfd</div>
    				<div id="smallbar1"></div>
    				<div id="designcredits">vcbnxc</div>
    			</div>
    			<div id="footerpart2">
    				<div id="otherstuff">fhjfdjhkf</div>
    			</div>
    			<div id="footerpart3">
    				<div id="email">dsjkfds</div>
    				<div id="facebook">ssfkdjd</div>
    			</div>
    		</div>
    	</footer>
    	
    	</div>
    CSS code:
    Code:
    html{
    	height: 100%;
    }
    
    body{
    	background: #ececec;
    	margin: 0;
    	padding: 0;
    	height: 100%;
    }
    
    #container{
    	min-height: 100%;
    }
    
    /**************************
    	HEADER
    **************************/
    
    header{
    	height: 189px;
    	width: 100%;
    	top: 0;
    	left: 0;
    	position: absolute;
    	background: #ffffff;
    }
    
    #headercontent{
    	width: 850px;
    	height: 189px;
    	top: 0;
    	left: 0;
    	background: #f5f5f5;
    	display: block;
    	margin: 0 auto 0 auto;
    	position: relative;
    }
    
    #sitetitle{
    	width: 280px;
    	height: 40px;
    	background: yellow;
    	float: left;
    }
    
    #navigation{
    	width: 570px;
    	height: 40px;
    	background: #ff9191;
    	display: block;
    	float: right;
    }
    
    #longbar{
    	clear: both;
    	background: #5c5c5c;
    	width: 850px;
    	height: 1px;
    }
    
    /**************************
    	FOOTER
    **************************/
    
    footer{
    	bottom: 0;
    	left: 0;
    	height: 192px;
    	width: 100%;
    	position: absolute;
    	background: url('../images/footerbg.gif');
    }
    
    #footercontent{
    	width: 850px;
    	height: 192px;
    	background: #ffffff;
    	margin: 0 auto;
    }
    
    #footerpart1{
    	height: 192px;
    	width: 310px;
    	float: left;
    	background: yellow;
    }
    
    #elsewhere{
    	width: 130px;
    	height: 100px;
    	background: #77ffca;
    	float: left;
    }
    
    #feeds{
    	width: 180px;
    	height: 100px;
    	background: #35b785;
    	float: left;
    }
    
    #smallbar1{
    	width: 310px;
    	height: 1px;
    	background: #5c5c5c;
    	clear: both;
    }
    
    #designcredits{
    	width: 310px;
    	height: 91px;
    	background: #158056;
    }
    
    #footerpart2{
    	width: 310px;
    	height: 192px;
    	float: left;
    	background: red;
    }
    
    #otherstuff{
    	width: 310px;
    	height: 192px;
    	background: #ffa2fe;
    }
    
    #footerpart3{
    	width: 230px;
    	height: 192px;
    	float: left;
    	background: green;
    }
    
    #email{
    	width: 230px;
    	height: 100px;
    	background: orange;
    }
    
    #facebook{
    	width: 230px;
    	height: 92px;
    	background: cyan;
    }
    
    /**************************
    	CONTENT
    **************************/
    
    #content{
    	width: 850px;
    	background: #d2d2d2;
    	display: block;
    	height: 100%;
    	margin: 0 auto;
    	position: relative;
    	top: 189px;
    	bottom: 192px;
    	min-height: 100%;
    }
    Last edited by apotd; 03-23-2012 at 05:21 PM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    min-height: 100%;

    you either need to have your header and footer heights in %, then min-height: 100% - footer - header

    or

    sticky footer
    http://ryanfait.com/sticky-footer/
    Last edited by Sammy12; 03-23-2012 at 05:38 PM.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Is there no way to define the height of my header and footer in pixels, and still be able to use the min-height: 100%, without using the sticky footer? In the layout I don't want a sticky footer and need to be able to choose the exact height of the header and footer.
    Last edited by apotd; 03-23-2012 at 11:17 PM.

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh well, I changed the plans. I thought it might be easier to just put the footer after the content, the height of the content doesn't matter that much after all. But now I got myself another problem. My footer covers a part of my content.

    http://i42.tinypic.com/2igkl61.gif I drew a red line where the content div stops, though it's supposed to be longer (the light yellow div in the middle, for example, is much longer than this). After the red line the footer already starts.

    HTML:
    Code:
    	<div id="container">
    
    	<header>
    		<div id="headercontent">
    			<div id="sitetitle">dfjkfdke</div>
    			<div id="navigation">ajdjd akdjd adhjs dkss dksqjks</div>
    			<div id="longbar"></div>
    			<div id="headertext">slkdsfldkds</div>
    		</div>
    	</header>
    	
    	<div id="content">
    		<div id="contentleft">
    			<div id="latestrelease">dsfjkdf</div>
    			<div id="contentbar1"></div>
    			<div id="featuredartist">dslff</div>
    		</div>
    		<div id="contentright">
    			<div id="recentreleases">fdksldf</div>
    			<div id="contentbar2"></div>
    			<div id="blogposts">kfdslsdfk</div>
    			<div id="events">fldskfsd</div>
    			<div id="contentbar3"></div>
    			<div id="links">ffdsdlkd</div>
    		</div>
    	</div>
    	
    	<footer>
    		<div id="footerpart1">
    			<div id="elsewhere">sdkhfdskdfs</div>
    			<div id="feeds">dsjhfsfd</div>				
    			<div id="smallbar1"></div>
    			<div id="designcredits">vcbnxc</div>
    		</div>
    		<div id="footerpart2">
    			<div id="releases">fhjfdjhkf</div>
    		</div>
    		<div id="footerpart3">
    			<div id="mailinglist">dsjkfds</div>
    			<div id="twitterbox">ssfkdjd</div>
    		</div>
    	</footer>
    	
    	</div>
    Code:
    body{
    	background: #ececec;
    	margin: 0;
    	padding: 0;
    }
    
    /**************************
    	HEADER
    **************************/
    
    header{
    	height: 189px;
    	width: 100%;
    	top: 0;
    	left: 0;
    	position: absolute;
    	background: #ffffff;
    }
    
    #headercontent{
    	width: 850px;
    	height: 189px;
    	top: 0;
    	left: 0;
    	background: #f5f5f5;
    	display: block;
    	margin: 0 auto 0 auto;
    	position: relative;
    }
    
    #sitetitle{
    	width: 280px;
    	height: 40px;
    	background: yellow;
    	float: left;
    }
    
    #navigation{
    	width: 570px;
    	height: 40px;
    	background: #ff9191;
    	display: block;
    	float: right;
    }
    
    #longbar{
    	clear: both;
    	background: #5c5c5c;
    	width: 850px;
    	height: 1px;
    }
    
    /**************************
    	CONTENT
    **************************/
    
    #content{
    	width: 850px;
    	background: #d2d2d2;
    	display: block;
    	margin: 0 auto;
    	position: relative;
    	top: 189px;
    	bottom: 192px;
    	min-height: 100%;
    }
    
    	/** LEFT CONTENT **/
    
    #contentleft{
    	width: 310px;
    	background: #e4e3e3;
    	float: left;
    }
    
    #latestrelease{
    	width: 310px;
    	height: 300px;
    	background: #d3dbee;
    }
    
    #contentbar1{
    	width: 310px;
    	height: 1px;
    	background: #5c5c5c;
    }
    
    #featuredartist{
    	width: 310px;
    	height: 120px;
    	background: #ffc7a9;
    }
    	/** RIGHT CONTENT **/
    
    #contentright{
    	width: 540px;
    	background: #e9dcdc;
    	float: left;
    }
    
    #recentreleases{
    	width: 540px;
    	height: 170px;
    	background: #e8eed3;
    }
    
    #contentbar2{
    	width: 540px;
    	height: 1px;
    	background: #5c5c5c;
    }
    
    #blogposts{
    	width: 310px;
    	height: 370px;
    	float: left;
    	background: #e4ff88;
    }
    
    #events{
    	width: 230px;
    	height: 100px;
    	background: #88ffe7;
    	float: right;
    }
    
    #links{
    	width: 230px;
    	height: 200px;
    	background: #a9bfff;
    	float: right;
    }
    
    /**************************
    	FOOTER
    **************************/
    
    footer{
    	width: 850px;
    	height: 192px;
    	background: #ffffff;
    	margin: 0 auto;
    	clear: both;
    	position: relative;
    }
    
    #footerpart1{
    	height: 192px;
    	width: 310px;
    	float: left;
    	background: yellow;
    }
    
    #elsewhere{
    	width: 130px;
    	height: 100px;
    	background: #77ffca;
    	float: left;
    }
    
    #feeds{
    	width: 180px;
    	height: 100px;
    	background: #35b785;
    	float: left;
    }
    
    #smallbar1{
    	width: 310px;
    	height: 1px;
    	background: #5c5c5c;
    	clear: both;
    }
    
    #designcredits{
    	width: 310px;
    	height: 91px;
    	background: #158056;
    }
    
    #footerpart2{
    	width: 310px;
    	height: 192px;
    	float: left;
    	background: red;
    }
    
    #releases{
    	width: 310px;
    	height: 192px;
    	background: #ffa2fe;
    }
    
    #footerpart3{
    	width: 230px;
    	height: 192px;
    	float: left;
    	background: green;
    }
    
    #mailinglist{
    	width: 230px;
    	height: 100px;
    	background: orange;
    }
    
    #twitterbox{
    	width: 230px;
    	height: 92px;
    	background: cyan;
    }
    I must say this is confusing the hell out of me, since I didn't use "bottom: 0" for the footer this time. I also removed the heights and min-heigts of 100%. I have no idea what causes the footer to cover my content divs.

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I see you're color coating everything, a phase everyone goes through. Most of the code is incorrect, and you are just going to have to use inspect element on chrome and work through it. It's part of the learning process. For starters, you shouldn't be using any position: absolute;

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well yes, I'm still having troubles with this, so without colors I get pretty much lost. Which part of my code is wrong, how can I start fixing this? I already changed the position absolutes to relatives, and my code is working like I want it to. But I'd like to have as little mistakes as possible. What do you exaclty mean by inspecting the element on Chrome? I mean, how can that help me?

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<style>
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			html, body {
    				height: 100%;
    			}
    			body {
    				font: 16px/1.5 Arial, Helvetica, sans-serif;
    			}
    			
    			#header, #content, #footer {
    				margin: 0 auto;
    				width: 970px;
    			}
    			
    			#page-wrap {
    				margin: 0 auto -200px;
    				min-height: 100%;
    				height: auto !important;
    				height: 100%;
    			}
    			#header {
    				height: 50px;
    				background: #ccc;
    			}
    			#footer, #footer-container {
    				height: 200px;
    			}
    			#footer {
    				background: #ddd;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="page-wrap">
    			<header id="header">
    				Header
    			</header>
    			<div id="content">
    				Content
    			</div>
    			<div id="footer-container"></div>
    		</div>
    		<footer id="footer">
    			Footer
    		</footer>
    	</body>
    </html>
    Last edited by Sammy12; 03-24-2012 at 10:57 PM.

  • #8
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I don't understand two things:
    1. Why is the footer not included in the wrapper?
    2. What is the footer-container doing in the wrapper? And why is the footer not in the footer-container?

  • #9
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Let me try to explain this well-known layout:

    #page-wrap is set to min-height: 100%;, the other height stuff is for IE, since older versions don't support min-, and max-.

    We set a negative margin on #page-wrap, so that we could take into account for the #footer. Basically #page-wrap is set to ( 100% height MINUS the height of the footer (with negative margin) ).

    The #footer-container "pushes" the #footer down when the content gets larger.

    All of this is extremely difficult to explain and understand. As of now, you just have to accept it :P

    http://ryanfait.com/resources/footer...ottom-of-page/

  • #10
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you, I'll try to keep that in mind while building a structure.


  •  

    Posting Permissions

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