ansaurus

Question

Answer 1

+2 A:

On modern browsers: set position: relative on the container div, position: absolute on the third div. Then you can position it to the top and bottom of the container the same time: top: 0px, bottom: 0px;

Joó Ádám 2009-11-30 08:20:48

Using this though, the inner div won't expand if there's a bunch of content in it will it?

Matthew Scharley 2009-11-30 08:29:55

Yes, it will expand.

Joó Ádám 2009-11-30 10:20:51

Great solution. Worked as intended here.

artur 2010-02-05 21:23:10

Not really works, as this would give the third div 100% height, and make it overlap the first two divs. It doesn't give the third div the *remaining* space.

sereda 2010-08-06 15:19:59

Answer 2

A:

You could also use faux columns by adding a vertically repeating background image to the CSS making the columns appear toy the space - this gives the appear. You could add this image to the div that wraps the three columns or to the body tag.

If these columns a going to have content in them it's probably worth adding some as the columns will behave differently.

matpol 2009-11-30 08:44:26

Answer 3

A:

You can hide the overflow in the containing DIV:

<html>
<head>
    <style>
        *{margin:0;padding:0;}
        html,body{height:100%;}
    </style>
</head>
<body>
    <div style="overflow:hidden;height:100%">
        <div style="height:100px;background-color:#ddd"></div>
        <div style="height:25px;background-color:#eee"></div>
        <div style="height:100%;background-color:#ccc">&nbsp;</div>
    </div>
</body>
</html>

Note that content might dissapear when resizing the window using this technique.

David 2009-11-30 09:27:41

If content Increases then the its hidden.

Wazdesign 2009-11-30 13:25:54

Answer 4

+3 A:

In jQuery, you can try something like this:

$(function() {
    $(window).resize(function() {
        $('div:last').height($(window).height() - $('div:last').offset().top);
    });
    $(window).resize();
});

Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.

If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:

$('div:last').height($(window).height() - $('div:last').offset().top - 30);

Assuming you want the div 30px from the bottom of the window.

Tatu Ulmanen 2009-11-30 09:29:08

does not work in IE7?

Josef Sábl 2010-06-30 14:08:06

This minor tweak will include padding/margin for the div, instead of requiring hard coding:`$('div:last').height($(window).height() - $('div:last').offset().top - ($('div:last').outerHeight(true) - $('div:last').height()));`

AaronSieb 2010-07-29 15:02:18

Answer 5

A:

You can use pure CSS height:100% (where 100% is the height of the visible area in the window) values in quirks mode by not using DOCTYPE at all or using IE-faulty HTML 4.0 DOCTYPE (without the .dtd url)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>

You can ditch the <!DOCTYPE.. entirely, it still would have the same effect. overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser!

Andris 2009-11-30 09:45:58

Answer 6

A:

html style="height:100%">
<head>
    <style type="css">
        html , body {
                width:100%; 
                height:100%;
                padding:0px;
                margin:0px;
        }
    </style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
    <div style="height:100%;">
        <div style="height:100px;background-color:#ddd">&nbsp;</div>
        <div style="height:25px;background-color:#eee">&nbsp;</div>
        <div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc">&nbsp;</div>
    </div>
</body>
</html>

Perhaps this could work?! But I don't know whats happens if there is to mutch text...

majorhai 2009-11-30 09:52:23

Answer 7

A:

Simply don't worry about it if your goal is to have the colour fill the bottom.

Set the colour of the outer div, and let the third one resize its height however it wants as content goes in.

<html style="height:100%">
<head>
    <style type="css">
        html , body {
                width:100%; height:100%;
                padding:0px;
                margin:0px;
        }
    </style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
    <div style="height:100%;width:100%;background-color:#ccc">
        <div style="height:100px;background-color:#ddd">&nbsp;</div>
        <div style="height:25px;background-color:#eee">&nbsp;</div>
        <div style="">&nbsp;</div>
    </div>
</body>
</html>

Kales 2009-11-30 10:02:18

Answer 8

A:

The property 'height: 100%;' will instruct browsers to take the 100 per cent of the available screen space for that particular div, which means that your browser will check the browsing space size and return it to the CSS engine without checking whether there are any elements inside it.

The only workaround that I see to fit here is to use the solution provided by David to use 'position: absolute; bottom: 0;' for that div.

sandfighter 2009-11-30 10:12:00

Answer 9

A:

it a bit ugly, but it works..

 <html style="height:100%">
    <head>
     <style type="css">
      html , body {
           width:100%;
           height:100%;
           padding:0px;
           margin:0px;
      }
     </style>
    </head>
    <body style="height:100%;padding:0px;margin:0px;">
     <div style="width:100%;height:100%;">
      <div style="width:100%;height:100px;background-color:#ddd;">&nbsp;</div>
      <div style="width:100%;height:25px;background-color:#eee;">&nbsp;</div>
      <div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;">&nbsp;</div>
     </div>
    </body>
 </html>

Andre Haverdings 2009-11-30 10:36:45

Answer 10

A:

Here's a litle jquery fix I have done:

<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
        $("#thirdDiv").height(heightToFill);
    });
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
    <div id="firstDiv" style="height: 100px; background-color: #ddd">
        &nbsp;</div>
    <div id="secondDiv" style="height: 25px; background-color: #eee">
        &nbsp;</div>
    <div id="thirdDiv" style="background-color: #ccc;">
        &nbsp;a</div>
</div>
</body>
</html>

Jronny 2009-11-30 10:39:27

This initializes the div's height when the page loads.You may also need to add Tatu Ulmanen's code so the div's dimension will be changed after every window resize.

Jronny 2009-12-01 02:47:06

Answer 11

A:

$(window).resize(function(){
        $('.elastic').each(function(i,n){
        var ph = $(this).parent().height();
        var pw = $(this).parent().width();
        var sh = 0; 
        var s = $(this).siblings().each(function(i,n){
            sh += $(this).height();
        })
        $(this).height(ph-sh);
        sh = 0, ph = 0, s=0;

    }); 
});

put the following on on your script tag or external javascript. then change

when you resize the window... it will automatically fit its height to available space on the bottom. you could have as many divs as you like however you can only have one elastic inside that parent. couldnt be bothered to calculate multiple elastics :) hope it helps

Val 2010-01-06 16:43:48

ansaurus

tags:

views:

answers:

How to apply 100% height to div?

related questions