...

View Full Version : Can't get wrapper 100% but 200px off bottom



boogily
10-28-2011, 11:56 PM
I am trying to create a webpage that has a content wrapper (with background) that scales with the browser when it comes to height. Normally this is easy when talking about doing it at 100%. But I am trying to do it 100% and leave a 200px gap at the bottom. So it will always fill the screen except the bottom 200px. Like it had a padding-bottom of -200px (obviously that wont work)

I hope that makes sense. This http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ doesn't help either, because the negative margin would still cause the content wrapper background to show all 100%, where I'd want it to show all 100% minus 200px (without the content wrapper bkg).

Thanks for any advice...

Sammy12
10-29-2011, 03:00 AM
what about



.wrapper {
height: 100%;
margin: 0 auto -200px;
}

Arbitrator
10-29-2011, 09:38 AM
I am trying to create a webpage that has a content wrapper (with background) that scales with the browser when it comes to height. Normally this is easy when talking about doing it at 100%. But I am trying to do it 100% and leave a 200px gap at the bottom. So it will always fill the screen except the bottom 200px. Like it had a padding-bottom of -200px (obviously that wont work)

I hope that makes sense. This http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ doesn't help either, because the negative margin would still cause the content wrapper background to show all 100%, where I'd want it to show all 100% minus 200px (without the content wrapper bkg).It's not 100% clear to me what you're asking for in terms of the background issue, but perhaps this might work:


<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title>Demo</title>
<style>
* { margin: 0; }
html { background-color: white; color: black; font-family: sans-serif; }
p { margin: 1em; }
.ruler, #wrapper { overflow: auto; opacity: 0.8; }
.ruler { position: absolute; bottom: 0; width: 200px; height: 200px; }
#wrapper { background-color: lightgray; color: black; }
#ruler_1 { left: 0; background-color: slategray; color: white; }
#ruler_2 { right: 0; background-color: tan; }

/* This code does not serve its intended purpose.
html, body, #wrapper { height: 100%; }
#wrapper { width: 50%; margin: 0 auto -200px; } */

#wrapper { position: absolute; top: 0; left: 2em; bottom: 200px; right: 2em; width: 1024px; margin: 0 auto; }
</style>
</head>
<body>
<div id="wrapper"><p>This is demo content.</p></div>
<div id="ruler_1" class="ruler"><p>This square is 200 pixels high.</p></div>
<div id="ruler_2" class="ruler"><p>This square is 200 pixels high.</p></div>
</body>
</html>

It works for me in Chrome 15 (beta), Firefox 8 (beta), Internet Explorer 9, Opera 11.5, and Safari 5 with one caveat: Internet Explorer 9 doesn't dynamically move the bottom edge of the #wrapper element upward when a horizontal scrollbar appears. Instead, the 200-pixel offset becomes 200-pixels minus the scrollbar height.

CSS has supported this technique for quite some time, but most developers have shunned it because it doesn't work in older versions of Internet Explorer (which do not properly support all four position properties being used simultaneously).


what about



.wrapper {
height: 100%;
margin: 0 auto -200px;
}
This does not work. To make height: 100%; have any effect, you need to also specify a height (such as height: 100%;) on all ancestor elements (including html and body), and, even then, this code does not have the desired effect.

boogily
10-29-2011, 05:05 PM
Arbitrator, you figured it out! Wow, I'll post a live version in a few days. Thx



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum