1 Replies - 883 Views - Last Post: 02 August 2012 - 02:16 AM

#1 notice88  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 89
  • Joined: 21-December 11

cant get the content div tag of my page 100% height..

Posted 01 August 2012 - 05:52 PM

What do i need to add to make this hapen? I want my content div to stretch at the bottom. i want it to be relative. U can remove the contentwrapper if you want to.. I want my page to be stretchable when zooming in and zooming out



HTML
<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Index</title>
   		<link href="index.css" rel="stylesheet" type="text/css" />
	</head>
    
    <body>
		    	
        <div id = 'wrapper'>
        
            <div id='header'>Header</div>
            
            <div id = 'ContentWrapper'>
            	<div id ='content'>Content</div>
            </div>
            
            <div id='footer'>Footer</div>
        
        </div>
    
    </body>
</html>



/* CSS Document */
html,
body 
{
	font-family:Arial, Helvetica, sans-serif;
	margin:0px;
	padding:0px;
	height:100%;
}

div#wrapper
{
	position:relative;
	width:100%;
	border:2px dashed #660000;
	
	height:auto !important;/* real browsers */
	height:100%;/* IE6: treaded as min-height*/

	min-height:100%;/* real browsers */

}

div#header
{
	position:relative;
	height:30px;
	border:2px solid black;
}

#ContentWrapper
{
	position:relative;
	height:auto !important;/* real browsers */
	height:100%;/* IE6: treaded as min-height*/

	min-height:100%;/* real browsers */
	background:#333;
}


	div#content
	{
		position:relative;
		height:100%;	
		border:2px solid #3F0;
	}

div#footer
{
	position:absolute;
	border:2px solid #9FF;
	left:0px;
	right:0px;
	bottom:0px;
	
	padding:10px 0px 10px 10px;
	
}






Is This A Good Question/Topic? 0
  • +

Replies To: cant get the content div tag of my page 100% height..

#2 StefanOnRails  Icon User is offline

  • D.I.C Head

Reputation: 35
  • View blog
  • Posts: 106
  • Joined: 31-July 12

Re: cant get the content div tag of my page 100% height..

Posted 02 August 2012 - 02:16 AM

Your problem is not quite clear to me, do you want your div#content to be able to stretch until it reaches the div#footer (which should always stay at the bottom) and shrink when browser is in window mode? If yes, I suggest checking the flexible box model (CSS 3), but in this case you will need to use HTML5 which is not properly supported in all browsers.

CSS3 Flexible Box (YouTube)
CSS3 Flexible Box
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1