Solved

How can I extend a div to the bottom of the page?

Posted on 2006-10-20
13
2,312 Views
Last Modified: 2008-01-09
Take for instance this layout: http://www.krahs-emag.com/test06d2.php

The white line is a left border on a containing div, if my content does not reach the end of the page, the containing div does not either.

How can I make that div extend to the bottom of the page if the content does not make it reach there?

I want to add that I need this to stay XHTML strict.
0
Comment
Question by:Trel
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 2
13 Comments
 
LVL 2

Expert Comment

by:harshgrover
ID: 17776149
look at the following two samples of code.

1) This is something similar to what you have. The div spans just one column

***************
<html>
<div style="background:red" >hello world</div>
<body>
</body>
</html>
*******************************
2) This is the modified code, to have a fixed height

************************************
<html>
<div style="background:red;height:80%" >hello world</div>
<body>
</body>
</html>
*************************************
Just a word of caution though.
if you set the height of the div defined by the class "content-box", you would not be able to get the desired effect.

the key is to understand, that the percentages work relative to the parent div. so you would need to set this percentage in the class "right-column" and also in "content-box"

Lemee know if you need any clarifications

~Gary
0
 

Author Comment

by:Trel
ID: 17777145
I'm not sure I understand that.
Also, wouldn't that cause a problem if the content inside exceeded the 100% of the page and needed to cause a scroll bar?
0
 

Author Comment

by:Trel
ID: 17777165
Wait, another quesition, I'm trying to set the wrap div to do it, not the inner left and right ones. That one is

<body>
<div class="wrap">
rest of the page
</div>
</body>

If I set the wrap class to a height:100%; there is no change at all.
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 2

Expert Comment

by:harshgrover
ID: 17777192
to answer your second question, no it wont cause a problem. the height percentage attribute is overridden if the content is more than the allowed percentage. it automatically extends itself.

hopefully the following two examples should illustrate better on what i mean.
1)
********************
<html>
<div>
    <div style="background:red;height:80%" >hello world</div>
</div>
<body>
</body>
</html>
********************

2)
********************
<html>
<div style="background:blue;height:100%">
    <div style="background:red;height:80%" >hello world</div>
</div>
<body>
</body>
</html>
********************

In the first example, the div does not span 80% of the page. Its height is set to 80% of its parent div. Since there is no height attribute set for the parent div, the child div is still as high as its parent div.

now consider the second piece of code.
The first div has the height set to 100%. so it spans the entire page.
The child div has the height set to 80%, so it spans 80% of the parent div's height.

To summarize, if you have nested div's as in the examples above, all the position elements, namely 'position', 'top', 'left', 'height', 'width' etc, they are all with respect to their parent div tags.

Hope this helps
0
 
LVL 2

Expert Comment

by:harshgrover
ID: 17777222
yup...i saw your page structure. you would need to set the height:100%  to your right-column, then to your content-wrapper-b, and then to your content-box

0
 

Author Comment

by:Trel
ID: 17777486
It made absolutely no difference :(

Without the height:100% : http://www.krahs-emag.com/test06d3.php
With the height:100% : http://www.krahs-emag.com/test06d4.php

no visible difference
0
 
LVL 15

Accepted Solution

by:
Daydreams earned 250 total points
ID: 17777512
Hi Trel,

You'll need to use min-height and also set 100% to the body and html, because you are specifying 100% of the parent, and body, html is the parent, and tell IE6 to use height in the conditional comment.

http://communitymx.com/content/article.cfm?page=2&cid=BAD95

Take a look at this example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Filling the window</title>
<style type="text/css">
html, body {height: 100%;}
body {margin: 0;padding: 0;background: #fff;color: #000;}
#wrap {min-height: 100%; width:300px;padding: 10px;background: #CCFFCC;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#wrap {height: 100%;}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<p>Fill the window!</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet </p>
</div>
</body>
</html>
0
 
LVL 2

Expert Comment

by:harshgrover
ID: 17777533
but you did not make the complete changes...after changing the class wrap to have height:100%, you also need to have height:100% in the class ".right-column"

right now, it is as below:

.right-column
{
      width: 80%;
      float: left;

}

~Gary
0
 

Author Comment

by:Trel
ID: 17777583
@Daydreams, I'll try that now, will that invalidate my CSS?
@harshgrover, it's the second url that I modified: http://www.krahs-emag.com/test06d4.php
0
 
LVL 2

Expert Comment

by:harshgrover
ID: 17777599
yup...i looked at the second url. and it did not have the height:100% set. it only had the width set
0
 

Author Comment

by:Trel
ID: 17777641
@harshgrover, I was looking at my offline copy, sorry, it still didn't make a difference.

@daydreams, that worked, what exactly is the need for the IE conditional, it's working fine in IE6
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 17777877
Trel, for the conditional comments, IE 6.0 and lower does not support min-height, (although IE7 may support it; I haven't tested). However, its treatment of the height property — where it respects your height until you add more content than the height can accommodate, at which point it expands the height regardless of your desired value — is exactly how min-height is supposed to function.

More info on conditional comments:

http://alastairc.ac/2006/05/conditional-comments-in-css/
0
 

Author Comment

by:Trel
ID: 17778024
Thanks, it was working on one file and not the other, the one it was working with had extra padding on the bottom I forgot to remove so it did extend, on the one that wasn't working, that IE thing fixed it, thanks :)
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question