Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    May 2008
    Posts
    2
    Member #
    16824
    hi,
    In my page i have 2 blocks.Above one is content block(white color) and the below one is footer block(grey color).
    My problem is if the content block is small then i need the the footer block,has to be exetended till the page bottom.(the grey strip has to be extended)
    can anyone....

    --
    Shalini.

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    You need to give the first div (content block) a min-height.

    See below code or attached file.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    
    <head>
    
    <title>min-height example</title>
    
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    	<style type="text/css">
    
    	body
    	   {
    		font-family: Verdana, Arial, Helvetica, sans-serif;
    	   }
    
    	div.main_column
    	   {
    		background-color: white;
    		border: 1px solid black;
    		height: 100%;
    		min-height: 600px;
    		padding: 7px;
    		width: 400px;
    	   }
    
    	div.footer
    	   {
    		background-color: grey;
    		clear: both;
    		color: white;
    		height: 
    	   }
    
    	</style>
    
    </head>
    
    <body>
    	<div class="main_column"><p>
    		<p>Hello. I am the <strong>main_column</strong> &lt;div&gt;. My height is 100% and my min-height is 600px.</p>
    		<p>This means that if my content (or data) is less than 600px, my height will continue to 600px. If my content (or data) goes beyond
    		600px I will stretch to fit the content (or data).</p>
    	</div>
    	<div class="footer">Hi, I am the footer. As you can see the div above does not have 600px worth of content 9or data) but it still stretches down to 
    
    600px. Awesome.</div>
    
    </body>
    </html>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:05 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com