Jump to content

Issue with stretching div to the height of page


rockinaway

Recommended Posts

etcworld.co.uk/od3

 

if you go there, you can see the issue i am having. basically, I want the footer to stick to the bottom of the page and the header to stay up there. the div inside (which is of a smaller width) should be fluid and change height based on content. HOWEVER if the content doesn't fit the window, i still want this div to stretch for the full page.

 

i've tried a few things, and the current one means it stretches the length of the entire window even though i have a header and footer. i just want it to stretch between these two areas..

 

any ideas?

Link to comment
Share on other sites

etcworld.co.uk/od3

 

i had placed it in the first post too :)

 

lol ok didn't see that, i'll have a look  (it wasn't blue :P)

 

I see you read it the article but missed a little point. The min-height of 100% is meant to stretch the page to the very bottom. But Because you added extra margin at the top of #page the height of this element becomes 100% + that margin-top so that is more than 100% thus making your page always scroll. What you could do - instead of placing you header and nav outside #page and positoned absolute - is just place them inside of the #page with a normal position. That way the height of #page is 100% (if you remove that margin-top)

Link to comment
Share on other sites

that is pretty easy really

 

Make an extra wrapper outside #page and place  your #header and #nav in there so those get that width of 100% Set the  min-height of 100% on this outer wrapper.

 

Could look like this

 

<body>
        <div id="outerwrapper">
            <div id="header"></div>
            <div id="nav"></div>
            <div id="page">

            </div>
            <div id="push"></div>
        </div>
        <div id="footer"></div>
    </body>

 

Make sure you remove that top margin you have now though otherwise  it doesn't matter what you do

Link to comment
Share on other sites

have a look at this

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head><meta charset="UTF-8" />
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <link rel="icon" type="image/x-icon" href="favicon.ico"/>
        <title>example</title>
<style type="text/css">
body,html{height:100%;margin:0; padding:0}
#outerwrapper{min-height:100%;background:yellowgreen} /* outer wrapper is the 100% one, rest inside has a normal position */
#header{height:100px;background:green} 
#nav{height: 40px; background:#333}
#page{width:960px;margin: 0 auto} /* special width  and centering*/
#push,#footer{height:50px;}
#footer{margin-top:-50px;background:#999}
</style>
    </head>
    <body>
        <div id="outerwrapper">
            <div id="header"></div>
            <div id="nav"></div>
            <div id="page">

            </div>
            <div id="push"></div>
        </div>
        <div id="footer"></div>
    </body>
</html>

 

test it out :)

Link to comment
Share on other sites

just incase you want to have the visual effect  as if #page stretches to the bottom, we use something sneaky for that. Which is the following. I added an image for it and the additional code, run that as see what happens. Although #page doesn't stretch to the bottom but outerwrapper does, The visual effect is the same. I forgot the name of this technique but it's common practise

 

code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head><meta charset="UTF-8" />
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <link rel="icon" type="image/x-icon" href="favicon.ico"/>
        <title>example</title>
<style type="text/css">
body,html{height:100%;margin:0; padding:0}
#outerwrapper{min-height:100%;background:yellowgreen url(back.png) repeat-y 50%}  /*notice the 50% */
#header{height:100px;background:green}
#nav{height: 40px; background:#333}
#page{width:960px;margin: 0 auto; background:olive}
#push,#footer{height:50px;}
#footer{margin-top:-50px;background:#999}
</style>
    </head>
    <body>
        <div id="outerwrapper">    
            <div id="header"></div>
            <div id="nav"></div>
            <div id="page">

            </div>
            <div id="push"></div>
        </div>
        <div id="footer"></div>
    </body>
</html>

 

You could even use a data url in case you don't want an extra header request. Anyway this is how I would do it .

 

[attachment deleted by admin]

Link to comment
Share on other sites

oh i see.. so really i just created an image to extend down. i'll try that tomorrow and get back too you with the results, thanks!

yep that's how. that way it looks like your stretching it, very sneaky  ;) And if you can't use it which i doubt it's worth knowing of it

Link to comment
Share on other sites

i just tried it, but the issue is, the middle bit has a smaller width than the header and footer. i can't create an image easily because the amount of empty space either side will change based of screen size.. so how can i create the effect that the page bit stretches to the bottom without an image? (my primary aim)

Link to comment
Share on other sites

i just tried it, but the issue is, the middle bit has a smaller width than the header and footer. i can't create an image easily because the amount of empty space either side will change based of screen size.. so how can i create the effect that the page bit stretches to the bottom without an image? (my primary aim)

Than you just do the opposite of the sticky footer:

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head><meta charset="UTF-8" />
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <link rel="icon" type="image/x-icon" href="favicon.ico"/>
        <title>example</title>
<style type="text/css">
body,html{height:100%;margin:0; padding:0}
#header{height:140px;background:green; margin-bottom:-140px; position:relative;}
#nav{height: 40px; background:#333; position: relative; bottom:-100px;left:0; }
#toppush{height:140px;} /* combined height of the header and nav */
#page{height:100%;width:960px;margin: 0 auto; background:orange}
#push,#footer{height:50px;}
#footer{margin-top:-50px;background:#999}
</style>
    </head>
    <body>
        <div id="header">
            <div id="nav"></div>
        </div>
        <div id="page">
            <div id="toppush"></div>
            <div id="content">
                Your content goes here
            </div>
            <div id="push"></div>
        </div>
        <div id="footer"></div>
    </body>
</html>

Link to comment
Share on other sites

my bad! missed the 50% width.. how do i get that to match the width of the #page? as with % it's fluid.. while #page isnt..

 

The % is the position.  the image that got loaded has 960px width. The same as page. If you have a #page with of 40px you make the image 40px width

 

-edit so the % has nothing to do with the width. :P

Link to comment
Share on other sites

check it.. im back to square one :/ when trying your new code.. guess i'll just have to use the image technique :/

 

The last 2 codes i provided are 2 different techniques. I update 1 of them so , maybe try them out when you fully rested or something. Just run it as is, before you implement it in your own code. so you see how it works. They both just work, so before you post make sure you tested it and understand what is happening.

Link to comment
Share on other sites

yeah you're right haha.. half asleep.. i'll try it tomorrow and get back to you :)

make sure you copy the code than, so your certain you have the most updated ones. Also just using good old pen and paper to work out the rough dimensions can be very useful to get a hold of this stuff.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.