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 4 of 4
  1. #1
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts

    Can't get wrapper 100% but 200px off bottom

    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...ottom-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...
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    what about

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

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by boogily View Post
    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...ottom-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:

    Code:
    <?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).

    Quote Originally Posted by Sammy12 View Post
    what about

    Code:
    .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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    boogily (10-29-2011)

  • #4
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts
    Arbitrator, you figured it out! Wow, I'll post a live version in a few days. Thx
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"


  •  

    Posting Permissions

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