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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Padding not working with child div on 100% height?

    Hey. I can't seem to have bottom-padding for a parent div which has a child div with 100% height. So i've tried to have a 20px-tall "spacer" div below it, but as you can see in the link below, i was unsuccessful..

    http://tinyurl.com/6yuvvxl

    Here's the code:
    Code:
    <div id="banner"></div>
    <div id="menu"></div>
    <div id="wrapper"><img src="bg.jpg" name="bg" class="bg" id="bg">
    	<div id="blackbox">
        	sdfdgdfg
        </div>
        <div id="spacer">SPACER</div>
    </div>
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    * 
    {
    	padding: 0;
    	margin: 0;	
     	overflow-x: hidden;
    	overflow-y: hidden;
    
    }
    
    body, html
    {
    	height:100%;     
    	min-height:100%;
    }
    
    /**********/
    /** DIV ***/
    /**********/
    
    div#banner
    {
    	width: 100%;
    	height: 50px;
    	background: #00F;	
    }
    
    div#menu
    {
    	width: 100%;
    	height: 50px;
    	background: #066;	
    }
    
    div#wrapper
    {
    	width: 100%;
    	background: #999;
    	padding: 20px;
    	height: 100%;
    	border-collapse: collapse;
    }
    
    img.bg {
        min-height: 100%;
    	min-width: 1024px;
        width: 100%;
    	height: auto;
        position: absolute;
    	top: 102px;
    	left: -5px;
    	border: 5px solid #372e2b;
                    }
                    
                    @media screen and (max-width: 1024px){
                            img.bg {
                                    left: 50%;
                                    margin-left: -512px; }
                    }
    
    div#blackbox
    {
    	width: 900px;
    	background: #0FF;
    	height: 100%;
    	border-collapse: collapse;
    	position: absolute;
    }
    
    div#spacer
    {
    	height: 20px;
    	position: absolute;
    	background: #9F0000;
    	width: 56px;
    }

  • #2
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    I think the overflow-y is messing it up... but without it you're left with a scroll bar. Tried but failed. Having a body with a 100% height isn't the best solution anyway. Just add your content and a clearfix and let the inner body extend itself with the content.


  •  

    Posting Permissions

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