ansaurus

Question

How to make div scale vertically all the way down?

Answer 1

+1 A:

If you need support from IE6 and up, the answer is: You can´t in css only.

There are different solutions to really scale the div or just have it appear like that:

You can use a background-image for the grey div (if all you need is the background to stretch all the way down)
You can use javascript to calculate the height of the grey div and apply it to the blue div

There is a ccs option using a very big padding and an equally big negative margin, but I don´t remember if it works for all browsers and I can't find the article right now.

Edit: The big padding / negative margin css solution:

The article is talking about Firefox 1.5 and Safari 2 so I don't know if it still works, but here it is.

jeroen 2009-06-30 19:10:00

I remember that solution with big negative margin - I have used that once before, but for the love of god I can't remember the exact implementation details nor can I find it online!

Keyframe 2009-06-30 19:14:29

Answer 2

A:

The JavaScript to do it would be...

<div id="yourDiv" style="background-color: Blue; width: 150px;">
    Hello
</div>

<script type="text/javascript">
    var div = document.getElementById('yourDiv');

    div.style.height = document.body.clientHeight + 'px';
</script>

Edit:

Check this link for getting clientHeight in different browsers...

Chalkey 2009-06-30 19:14:03

Thanks, but javascript is not an option right now.

Keyframe 2009-06-30 19:18:22

Any particular reason why javascript isn't an option? If you have jquery available you could do something like var greydiv = $("#greydivselector").height();$("#bluedivselector").height(greydiv);And you could play around with offsets. Thoughts?

Acorn 2009-06-30 19:40:12

I agree, why isnt JavaScript an option? Probably an easier solution.

Chalkey 2009-06-30 20:33:57

Answer 3

A:

Inside of your parent div, if you set "float:right" on your blue div and play around with your height in percent (height:100%;), I think you should achieve what you're asking.

Since the blue div is a child of your grey div, the maximum height of your blue div shouldn't exceed your parent div. Unless I'm missing something here...

Also, if you are floating your blue div on the right, be sure to place it before the magenta div in your markup.

Acorn

Acorn 2009-06-30 19:14:49

Don't forget to specify the height of the parent, or the floated items won't 'stay inside' of the parent

MrChrister 2009-06-30 19:53:50

Answer 4

+1 A:

In my experience setting the height of the blue DIV to 100% doesn't work. The only time that I have wanted this was to have the blue DIV with it's own background, to solve this you need to just have the background of the gray DIV include the blue background of the other DIV.

jrglasgow 2009-06-30 19:26:00

aka faux column - I'm trying to avoid that though, since in my current setup I'd need to add another div container... if nothing else shows up, I'll do that. Thanks.

Keyframe 2009-06-30 19:28:13

Answer 5

A:

Another way to set height 100% in html objects is use styles:

<html>
<head>
 <style>
     html, body { 
   height: 100%; 
}

#mydiv { 
   height: 100%; 
   background-color:red; 
}     
 </style>
</head>
<body>
<div id="mydiv">aaa</div>
</body>
</html>

pho3nix 2009-06-30 19:41:16

For child objects to work with 100% height, the parent must have a fix height

MrChrister 2009-06-30 19:46:28

no if you declare html and body tag at height: 100%

pho3nix 2009-06-30 20:47:39

put html in my post in your browser and see the magic :)

pho3nix 2009-06-30 20:48:28

I did paste your HTML. It doesn't cover the question very well.

MrChrister 2009-06-30 23:16:43

Maybe because i don't defined margins in body, try put after height:100%, margin: 0 0 0 0; in body css

pho3nix 2009-06-30 23:38:42

Answer 6

A:

The key is to have a set height on the parent container. Then the height:100% works

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Divs</title>
<style type="text/css" media="all">
#main {
    height:30em;
    width:30em;
    background-color:#999999;
    padding:1em 1em 0px 1em;
}
.inner {
    width:5em;
}
#blue {
    float:right;
    background-color:#0000FF;
    height:100%;
}
#magenta {
    float:left;
    background-color:magenta;
}
</style>
</head>
<body>
<div id="main">
    <div class="inner" id="blue">
     1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10
    </div>
    <div class="inner" id="magenta">
     1<br/>2<br/>3<br/>4<br/>5<br/>6
    </div>
</div>
</body>
</html>

MrChrister 2009-06-30 19:45:21

yeah, but what if I don't know the height of the parent up front? I want it to scale with left div content... I wonder why wouldn't a min-height work as well in this situation, must be some kind of an oversight.

Keyframe 2009-06-30 22:45:52

Ah yes, the catch.

MrChrister 2009-06-30 23:17:51

ansaurus

tags:

views:

answers:

How to make div scale vertically all the way down?

related questions