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 height 100%

  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Div height 100%

    How can I get a div to have 100% height but also be longer than this if the content requires it?

    I can get the div to extend the full height of the screen but if the content inside the div happens to be longer than the browser window, when you scroll the div ends where the bottom of the window was and the content overflows it. I dont want to add scroll bars to the div.

    If I dont specify the height then the div is the correct length for the content, but I want to be able to have the div always fill the height of the screen - even if the content isnt long enough.
    WOW Paradise - Exclusive - Insiders Report!
    Download Free Insiders Report!!! www.wowparadise.eu

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Check the styles applied on the body,html and #wrap at http://bonrouge.com/2c-hf-fixed.php
    Code:
     html {height:100%;}
    body {
    margin:0;
    padding:0;
    height:100%;
    background-color:#ffffff;
    font-family:arial, serif;
    }
    #wrap {
    background:url(bg200W3.gif) top left repeat-y;
    min-height:100%;
    width:780px;
    margin:auto;
    position:relative;
    }
    * html #wrap {height:100%}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello leemarquis,
    Here's and even simpler one - http://nopeople.com/CSS/full-height-layout/index.html View the source to see how it's done.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks for the speedy replies. I seem to have it working in FF and IE7 but not in IE6. Heres the link:

    http://www.stuartmarquis.co.uk/menu

    In IE6 there are two problems.

    Firstly the background image should be fixed but it scrolls with the page.

    Secondly, the white column on the right doesnt extend to the bottom when you scroll.

    Any ideas how to fix this for IE6?

    Here's the css for it...

    Code:
    html, body{
    	height: 100%;
    	text-align: left;	
    	font: 12px Verdana, Arial, Helvetica, sans-serif;
    	color: #000;	
    	background: #435c01;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    
    
    
    
    h2{
    margin:0;
    }
    
    #bimage{
    position:fixed;
    top:0;
    left:0;
    margin:0;
    padding:0;
    width:100%;
    overflow:hidden;
    }
    
    
    * html #bimage { 
    	position: absolute;
    }
    
    
    .main-page{
    position:absolute; left:0px; top:0px; text-align:left;z-index:5;width:100%;
    min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto 0px; /* the bottom margin is the negative value of the footer's height */
    
    
    }
    
    
    
    
    .stuart-menu{
    position:fixed;
    width:52%;
    top:8px;
    left:0px;
    padding-left:1%;
    z-index:10;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    }
    
    
    .content{
    width:47%;
    min-height:100%;
    position:absolute;
    top:0;
    left:53%;
    
    background-image:url('http://stuartmarquis.co.uk/menu/images/text-background.png');
    }
    
    * html .content {height:100%}
    
    .content-border{
    width:108.5%;
    height:100%;
    position:absolute;
    top:0;
    left:-111%;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    }
    WOW Paradise - Exclusive - Insiders Report!
    Download Free Insiders Report!!! www.wowparadise.eu

  • #5
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Just realised - the reason from problem no.2 above is because of problem 1. So if I can fix it so that IE6 doesnt want to scroll to bottom of the image then the height of the div should be fine.

    What do I need to do in order get the image to be fixed?
    WOW Paradise - Exclusive - Insiders Report!
    Download Free Insiders Report!!! www.wowparadise.eu

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Jun 2008
    Posts
    68
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks - Ive tried to adjust my css based on thsi example but I cant seem to get it to work. Can you see whats wrong with my code at :

    Code:
    <?xml version="1.0" encoding="utf-8"?><!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" xml:lang="en-gb" lang="en-gb" dir="ltr" >
    
    <head>
    	  <base href="http://stuartmarquis.co.uk/menu/" />
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta name="robots" content="index, follow" />
      <meta name="keywords" content="joomla, Joomla" />
      <meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
      <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
      <title>stuartmarquis.co.uk</title>
    
      <link href="/menu/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
      <link href="/menu/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
      <link href="/menu/templates/stuart-temp1/favicon.ico" rel="shortcut icon" type="image/x-icon" />
      <script type="text/javascript" src="/menu/media/system/js/mootools.js"></script>
      <script type="text/javascript" src="/menu/media/system/js/caption.js"></script>
    
    	<meta http-equiv="Content-Type" content="text/html; _ISO" />
    	<meta name="mssmarttagspreventparsing" content="true" />
    
    	<meta http-equiv="imagetoolbar" content="no" />
    	<link href="/menu/templates/stuart-temp1/css/narrow.css" rel="stylesheet" type="text/css" media="screen" />
    	<link href="/menu/templates/stuart-temp1/css/template_css.css" rel="stylesheet" type="text/css" media="screen" />	
    	<link rel="alternate stylesheet" type="text/css" href="/menu/templates/stuart-temp1/css/narrow.css" title="narrow" media="screen" />
    	<link rel="alternate stylesheet" type="text/css" href="/menu/templates/stuart-temp1/css/wide.css" title="wide" media="screen" />
    	<script type="text/javascript" src="/menu/templates/stuart-temp1/js/styleswitch.js"></script>
    	<!--[if lte IE 6]>
    	<style type="text/css"> img { behavior: url('/menu/templates/stuart-temp1/css/iepngfix.htc'); }</style>
    	<link rel="stylesheet" type="text/css" href="/menu/templates/stuart-temp1/css/ie_hacks.css" media="screen, projection" />
    	<script type="text/javascript" src="/menu/templates/stuart-temp1/js/iehover.js"></script>
    	<![endif]-->	
    	<!--[if IE 7]>
    		<link rel="stylesheet" type="text/css" href="/menu/templates/stuart-temp1/css/ie_7.css" media="screen, projection" />
    	<![endif]-->
    	
    
    
    <!--[if IE]>
    <style type="text/css">
    .main-page,
    .content {
    zoom:1;
    }
    </style>
    <![endif]-->
    
    
    <!--[if lte IE 6]>
    		<style type="text/css">
    			html, body
    				{
    				height: 100%;
    				overflow: auto;
    				}
    			#bimage {
    				position: absolute;
    			}
    
    		</style>
    		<![endif]-->
    
    
    </head>
    
    <body>
        
    
    
    
    <img src="http://stuartmarquis.co.uk/menu/images/snake-blue.jpg" id="bimage" alt="snake" />
    
    
    
    <div class="main-page">
    
    
    
    <div class="stuart-menu">
    <ul class="menutabnav" id="tabnav"><li id="current" class="active item1"><a href="http://stuartmarquis.co.uk/menu/"><span>Home</span></a></li><li class="item2"><a href="/menu/about"><span>About</span></a></li><li class="item3"><a href="/menu/test-2"><span>Test 2</span></a></li><li class="item4"><a href="/menu/welcome"><span>Welcome</span></a></li><li class="item5"><a href="/menu/contact"><span>Contact</span></a></li></ul>
    </div>
    
    
    
    
    
    <div class="content-fade"></div>
    <div class="content">
    <div class="content-border">
    </div>
    
    
    
    <div class="blog">
    
    			<div class="leading">
    			
    
    <h2 class="contentheading">
    	2Welcome</h2>
    
    
    
    
    
    
    
    <p> 2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum porta sem. Proin nisl risus, volutpat nec, elementum quis, egestas sed, erat. Nunc egestas hendrerit lorem. Maecenas id neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam semper mi. Morbi aliquam, ligula sit amet gravida auctor, mauris odio tempor nisi, id commodo massa ante sit amet quam. </p><p>Fusce nisl purus, dapibus eu, pretium suscipit, posuere et, mi. Ut accumsan, orci sit amet ornare tincidunt, ligula nulla convallis risus, id vestibulum ipsum orci sit amet nibh. Suspendisse at ipsum sit amet nulla hendrerit pulvinar. Pellentesque nec dui. Nunc posuere tellus eget magna. Vivamus vel mauris sit amet dui pellentesque tempus. Nam quam.</p>
    
    		</div>
    		<span class="leading_separator">&nbsp;</span>
    	
    	
    	
    	</div>
    
    
    </div>
    
    
    
    
    </div>
    
    
        
    </body>
    </html>
    The CSS is below:

    Code:
    html, body{
    
    	text-align: left;	
    	font: 0.9em Arial, Helvetica, sans-serif;
    	color: #000;	
    	background: #0065c6;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    
    
    p{
    margin-top:10px;
    margin-bottom:15px;
    }
    
    h2{
    font-size: 1.7em;
    margin:0;
    }
    
    #bimage{
    position:fixed;
    top:0;
    left:0;
    margin:0;
    padding:0;
    width:100%;
    overflow:hidden;
    
    }
    
    
    .bimage2{
    
    	width: 250px;
    	height: 250px;
    	position: fixed;
    	top: 50px;
    	right: 50px;
    	background: #f00;
    z-index:110;
    }
    
    * html #bimage { 
    	position: absolute;
    }
    
    
    .main-page{
    position:absolute; left:0px; top:0px; text-align:left;z-index:5;width:100%;
    min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto 0px; /* the bottom margin is the negative value of the footer's height */
    
    
    }
    
    
    
    
    .stuart-menu{
    position:fixed;
    width:51.1%;
    top:8px;
    left:0px;
    padding-left:1%;
    padding-right:1%;
    z-index:10;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    text-align:center;
    
    }
    
    
    .content{
    width:47%;
    min-height:100%;
    position:absolute;
    top:0;
    left:53%;
    
    background-image:url('http://stuartmarquis.co.uk/menu/images/text-background.png');
    }
    
    * html .content {height:100%}
    
    
    
    .content-border{
    width:109%;
    height:100%;
    position:absolute;
    top:0;
    left:-111%;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    }
    
    .content-fade{
    width:10%;
    min-width:68px;
    min-height:100%;
    position:absolute;
    top:0;
    left:43%;
    background-image:url('http://stuartmarquis.co.uk/menu/images/white-fade.png');
    }
    * html .content-fade {height:100%}
    
    .blog, #page{
    padding:22px;
    padding-top:12px;
    padding-left:12px;
    }
    
    
    
    /* begin css tabs */
    
    ul#tabnav { /* general settings */
    text-align: left; /* set to left, right or center */
    margin: 0px; /* set margins as desired */
    font: bold 14px arial, sans-serif; /* set font as desired */
    border-bottom: 0px solid #fff; /* set border COLOR as desired */
    list-style-type: none;
    padding: 6px 0px 6px 0px; /* THIRD number must change with respect to padding-top (X) below */
    background-image:url('http://stuartmarquis.co.uk/menu/images/red-background.png');
    
    }
    
    ul#tabnav li { /* do not change */
    display: inline;
    margin:5px;
    }
    
    
    
    ul#tabnav li a { /* settings for all tab links */
    padding: 6px 7px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
    border: 0px solid #6c6; /* set border COLOR as desired; usually matches border color specified in #tabnav */
    color: #fff; /* set unselected tab link color as desired */
    margin-right: 0px; /* set additional spacing between tabs as desired */
    text-decoration: none;
    border-bottom: none;
    line-height:16px;
    }
    
    ul#tabnav a:hover { /* settings for hover effect */
    color: #ffe84c;
    background-image:url('http://stuartmarquis.co.uk/menu/images/red-background.png');
    
    }
    
    
    /* end css tabs */
    WOW Paradise - Exclusive - Insiders Report!
    Download Free Insiders Report!!! www.wowparadise.eu

  • #8
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    While using the xml declaration on your first line is proper, only modern browsers understand what to do with it while IE6 goes into quirks mode. You can safely lose that line.


  •  

    Posting Permissions

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