Help with layout

[Stealth549]

Hello, I would like to find out how to make a div tag "snap" to the top and bottom of a browser without having to fill a page up to make it expand. I hope that makes sense.

Thanks.

[everythingdaniel]

height: 100%;


Does that help?

[Stealth549]

thats dosent work :confused:

[BBarash]

Could you be a little more precise?

[Stealth549]

I want to make a page where the layout is the full height if the page, The only work around for me to do this is to do a min-height, but if I do that then I have issues with it either being set too high or too low, this is all relative as what resolution users are using and how much content is on the page.

[Stimulus]

height: 100%; should work for the css

[Stealth549]

Thanks for the replies so far. I have uploaded a demo located at the link below.

http://neal-t.com/layout_test/index.html

[richei]

you can try setting the position to relative, sometimes that works for me.

[Stealth549]

updated the demo page and it hasent given the effect that I am looking for.

[Stimulus]

Then put:


height: 100%;
margin-top: auto;
margin-bottom: auto;

[jlhaslip]

check this out: http://jlhaslip.trap17.com/samples/misc/demo/header_link_boxes.html

[richei]

Hey thanks, that helped me alot with another project :D

[tmoltuae]

Nice job with your example...

[BBarash]

Cool, nice one.

[Stealth549]

Thanks for the replies and demos, they have been useful. I have had a quick look at jlhaslip demo page and source code and I have been trying to digest the info, I have updated my demo page to take into account recent replies to this thread, demo page (http://neal-t.com/layout_test/). Still doesn’t have the effect im looking for, but I have probably missed something from jlhaslip demo. Please feel free to point out what that is.

[Stimulus]

Nice layout? I definitely need some layout help. Will you help me? I asked Allan, but he helped me once only

[richei]

you are missing things.


body
{
margin: 0;
}

#wrapper
{
/*width: 700px;
margin: 0 auto;
height: 100%;
border-right: 1px solid black;
border-left: 1px solid black;
margin-top: auto; // pick one, either 0 or auto
margin-bottom: auto;*/ // not sure that this comments correctly. i think u have to do each line individually (/* */)
height: 100%;
margin-bottom: auto; // pick 1, either define it here with these 2 or below with margin: 0 auto
margin-top: auto;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: lightgreen;
width: 700px;
margin: 0 auto;
min-height: 100%;
}