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
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS / Page border question

    Hi folks, first question here.

    I am in the process of adding colored margins to my website, using a colored background overlayed by a nice DIV box (containing the webpage contents) with rounded corners, so that it looks like the following:

    http://i.imgur.com/YRqUH.jpg

    Here is the abbreviated code I am using:

    HTML:
    <body class='body' bgColor='#17375E' style='height:97%;'>
    <div class='box'>WEBSITE CONTENTS</div>
    </body>

    CSS for the box, minus the corner rounding stuff:
    .box {
    height: 100%;
    background: #FFFFFF;
    padding: 1em 2em;
    }

    This works great and fills the page in Chrome, however in FF and IE, the box does not expand past the contents to fill the entire page.

    Thus I've resorted to using an absolute dimension for the content DIV, as follows:
    position:absolute; top:2%; bottom: 2%; left:1%; right:1%;

    HERE'S MY PROBLEM:
    While the absolute dimensioning of the DIV works great in all 3 browsers, I lose the auto-expanding ability of the DIV. In other words, when the contents EXCEED the height of a normal viewport, the DIV box doesn't expand and the contents just overflow into the blue margin.

    QUESTION:
    Is there any way I can have the best of both worlds? As in a DIV that expands to fit the whole page when contents are minimal, yet expands when contents overflow? Again this works simply with height: 100%; in Chrome, but not in FF or IE.

    Any help would be MUCH appreciated. Thanks!!!!

  • #2
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts
    What if you tried min-height: 100%;
    Does that work?

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I'm going to piggy-back off the previous post and expand by using box-sizing to maintain min-height: 100%;

    a mockup:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<title>Expanding with Full Height</title>
    		<meta charset="utf-8" />
    		<style>
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			
    			html, body {
    				height: 100%; /* who cares about this height, it's just for inheritance */
    			}
    			
    			.box-gutter {
    				padding: 20px;
    				height: 100%;
    				background: #333;
    				overflow: hidden; zoom: 1;
    				-webkit-box-sizing: border-box;
    				   -moz-box-sizing: border-box;
    				    -ms-box-sizing: border-box;
    				        box-sizing: border-box;
    			}
    			.box {
    				margin-bottom: 20px;
    				min-height: 100%;
    				background: #fff;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box-gutter">
    			<div class="box">
    				
    			</div>
    		</div>
    	</body>
    </html>
    EDIT: this method I created, does not work fully (for future users)
    Last edited by Sammy12; 03-08-2012 at 04:48 PM.

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you guys are the bomb. after hours tinkering i was about to resort to JS to get the scrollheight and set it dynamically

    Sammy12 I tested out your solution and it seems to work great except the box seems rigid and won't autoexpand. on the plus side the text stays within the box . I will however use your approach and perhaps tinker with it a bit.

    telekovar your min-height suggestion made me revisit my 'absolute' implementation and come up with the following solution:

    .box {
    position:absolute; top:2%; min-height: 90%; left:1%; right:1%;
    }

    Seems to work perfectly. there's no bottom margin but I just need to tinker. Thanks for your solutions gentlemen, if I don't post again that means all is well


  •  

    Posting Permissions

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