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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Full page width and height

    hello guys,

    i trying to build a basic page with 3 div blocks within it: "header", "src" & "footer".
    header is above, footer is always at the bottom and "src" is in between, in the middle of both of them.
    i want those elements to take full width and height of the page, without taking extra space so you don't need to scroll down or to the sides.
    while the header and the footer has specific height value, the "src" need to take the rest of the page that avadible.

    this is what i have made by so far:

    Code:
    body {
    display: block;
    
    }
    
    
    #header {
    background-color: #003366;
    height: 10em;
    }
    
    #src {
    
    
    }
    
    
    #footer  {
    background-color: #003366;
    height: 5em;
    }
    Sincerely, i cant get that job done. need your help.

    tnx

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello GentleGiant,
    Full height layouts have always been a mystery for new coders. Have a look at a demo I've made to help get you started - Full height layout with footer at the bottom
    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

  • #3
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much. Hope it'll work for me.

  • #4
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i have managed how to set full width of the div's and full height of the page thanks to your example. thank you a lot.

    still wonder if there is a way to set the "src" (in your example is the "content") in a way that it will take all the space that remain between the header and the footer without placing specific height value in px/em. Is there any solution that allow to divide the blocks by percentage relatively to the defined height of the entire html document? (ex. header takes 25% of the entire page height, footer 15% and src the rest 60%) or maybe any other ways to solve this?

    this is my new css file:
    Code:
    html, body{
    	height: 100%;
    	margin: 0;
    }
    
    #wrap {
    	min-height: 100%;
    	margin: 0 auto -103px; /* the bottom margin is the negative value of the footer's height */
    	position: relative;
    	background: #CBBE94;
    }
    
    #header {
                display: block;
                height: 10em;
                background-color: blue;
                width: 100%;
    }
    
    #src {
    	margin: 0 auto;
    	padding: 0 0 103px 0;
    	width: 100%;
    	background-color: red}
    			
    #footer {
    	height: 5em;
    	width: 100%;
    	position: absolute;
    	bottom: 0;
    	background-color: blue;
    }

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by GentleGiant View Post
    i have managed how to set full width of the div's and full height of the page thanks to your example. thank you a lot.

    still wonder if there is a way to set the "src" (in your example is the "content") in a way that it will take all the space that remain between the header and the footer without placing specific height value in px/em.
    Look what a background color in the right place can do for you, compare this new CSS to yours -
    Code:
    html, body {
    	height: 100%;
    	margin: 0;
    }
    #wrap {
    	min-height: 100%;
    	margin: 0 0 5em; /* the bottom margin is the negative value of the footer's height */
    	position: relative;
    	background: #f00;
    }
    #header {
    	height: 10em;
    	width: 100%;
    	display: block;
    	background: #00f;
    }
    #src {
    	width: 100%;
    	margin: 0 auto;
    	padding: 0 0 103px 0;
    	background: #f00
    }
    #footer {
    	height: 5em;
    	width: 100%;
    	position: absolute;
    	bottom: 0;
    	background: #00f;
    }
    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

  • #6
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    got it. tnx


  •  

    Posting Permissions

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