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 8 of 8

Thread: Div too high

  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Div too high

    Hello!

    I am trying to make a simple layout, however my content div seems too long. It has a min-height of 100%; but it adds up the height of the header, making is too high. However, when I remove the min-height, the height of the div is only as high as the content, and I would like the background of the content div to always fill the rest of the screen, regardless of the content. Anybody knows how to fix this?

    HTML
    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<?php include_once('includes/header.php'); ?>
    	<title>Prepd. Your presentation, Prepared.</title>
    </head>
    
    <body>
    
    <div id="colorBar"></div>
    
    <header>
    	<div id="headerContent">
    		<div id="logo"></div>
    		<h1 class="floatLeft marginTop">
    			blugh
    		</h1>
    	</div>
    </header>
    
    <div id="content">
    fdkjl
    </div>
    
    <footer>
    </footer>
    
    </body>
    
    </html>
    CSS
    Code:
    body, html {
    	height: 100%;
    }
    
    body {
    	background: url('../images/bgBody.png') repeat;
    	color: #222222;
    	margin: 0;
    	padding: 0;
    }
    
    #colorBar {
    	width: 100%;
    	height: 10px;
    	background: #59cee5;
    	position: fixed;
    	left: 0;
    	top: 0;
    	z-index: 15;
    }
    
    header {
    	width: 100%;
    	height: 250px;
    	background: url('../images/bgHeader.png');
    	position: relative;
    	z-index: 14;
    }
    
    #headerContent {
    	width: 960px;
    	margin: 0 auto;
    	height: auto;
    	padding-left: 50px;
    	padding-top: 45px;
    }
    
    #logo {
    	width: 172px;
    	height: 172px;
    	background: url('../images/logo.png');
    	float: left;
    	margin-right: 80px;
    }
    
    #content {
    	clear: both;
    	width: 960px;
    	margin: 0 auto;
    	padding: 20px;
    	min-height: 100%;
    	background: #ffffff;
    	position: relative;
    	overflow: hidden;
    	zoom: 1;
    }
    
    footer {
    	width: 100%;
    	min-height: 50px;
    	background: url('../images/bgHeader.png');
    	position: absolute;
    	bottom: 0;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    Remove this:

    body, html {
    height: 100%;
    }
    Evolution - The non-random survival of random variants.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello! Thank you for the suggestion.

    I tried this but unfortunately the background of the content box only stretches as far as it's filled with text. Is there a possibility to fix this?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    use this
    <div id="content" style="background:transparent">fdkjl</div> or better put it in the css file.
    Evolution - The non-random survival of random variants.

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I actually meant that I want the background of the content div to stretch over the whole length and not just the length of its current content (only being the text for now).

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    You normally can not see a div. If you have a background image in it or a background color or color your borders, then you see where it's at. If the container that houses the div has any of the above, you will see it.
    You have a background image for the body tag, so I thought that's how your seeing the div. The transparent background should have hidden it again from view.
    How are you seeing it? Because if you don't see it, why would it matter how large or small it is?

    I ask this because doing this is not easy and most of the time not necessary.
    Evolution - The non-random survival of random variants.

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I am sort of confused about what you mean. I'll try to make myself more clear by posting how it looks right now.

    https://dl.dropboxusercontent.com/u/42705761/1.png

    If you look closely, the background of the content div (completely white background) should be the whole height of the browser screen.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    So how does a picture help?

    Why didn't you answer my questions?

    I did find this on Stack Overview with a heads up to http://ryanfait.com/

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<?php include_once('includes/header.php'); ?>
    	<title>Prepd. Your presentation, Prepared.</title>
    <style type="text/css">
    * {
      margin: 0;
      margin: 0;
    }
    html, body {
      height: 100%;
    }
    #colorBar {
    	width: 100%;
    	height: 10px;
    	background: #59cee5;
    	position: fixed;
    	left: 0;
    	top: 0;
    	z-index: 15;
    }
    header {
    	width: 100%;
    	height: 250px;
    	//border-top: 1px solid black;
    	background: url('../images/bgHeader.png');
    	//position: relative;
    	//z-index: 14;
    }
    #content {
      min-height: calc(100% - 250px);
      height: auto !important; /*min-height hack*/
      height: 100%;            /*min-height hack*/
      margin-bottom: -4em;     /*Negates #push on longer pages*/
    }
    #footer, #push {
      height: 4em;
    }
    </style>
    </head>
    
    <body>
    <div id="colorBar"></div>
    <header>
    	<div id="headerContent">
    		<div id="logo"></div>
    		<h1 class="floatLeft marginTop">
    			blugh
    		</h1>
    	</div>
    </header>
    
    <div id="content" style="background-color: red;">
      Place your content here.
      <div id="push"></div>
    </div>
    <div id="footer" style="background-color:pink;">
      Place your footer information here.
    </div>
    </body>
    Does that work?
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

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