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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Using negative margins (or something else?) to fill available height

    what i'm trying to do seems simple enough, but isn't turning out that way.

    lets say i have a page background of some color (e.g., orange).

    then i have a main container div that is centered with auto margins, and has a white background.

    i want this main container to start at 100px from the top (so 100px of orange shows above it), and the white background should expand to the bottom of the page - without scrollbars. if i set it's height to 100%, the 100px top margin is added to the 100% height of its parent (body + html), so it acts as if there's 100px of substance beneath the viewport and therefor shows scrollbars.

    i had assumed a negative bottom margin set for the same amount as the top margin would work, but alas it does not.

    obviously i don't want to just force-hide scrollbars by overflow:hidden or position:asbolute/fixed - if content in the container forces it to expand, it should do that. otherwise, even if there's very little content - or even none - it should expand to the bottom of the page.

    i've attached a very basic (non-working) example - any insight would be appreciate.

    i'm less interested in a working version than i am for the concept - i'm sure this is something that is dealt with commonly by people who do CSS full time - i'm most interested in understanding the "best-practice" in this case.

    tyia

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" > 
    <head>
    	
    	<style type="text/css">
    		html {
    			height : 100%;
    		}		
    		body {
    			margin : 0;
    			background : #F90;
    			height : 100%;
    		}		
    		div.wrapper {
    			margin : 100px auto -100px auto;
    			width : 500px;
    			background : #FFF;
    			height : 100%;
    		}
    	</style>
    	
    </head>
    
    <body>
    
    	<div class="wrapper">
    		
    	</div>
    	
    </body>
    
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello big-momo,
    I like this method of doing a full height layout.
    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 Coder
    Join Date
    Aug 2010
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks for the link excavator. looks like they're using negative margins as well - not sure what i'm doing wrong exactly. i'll take a closer look. thanks again


  •  

    Tags for this Thread

    Posting Permissions

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