ansaurus

Question

Answer 1

+1 A:

Try

height: 100%;

or

height: auto;

James Hulse 2010-08-05 02:25:08

Beat me to it by 34s.

Thqr 2010-08-05 02:26:18

`100%` will overshoot the height of the sidebar because there are already 2 other divs.

casablanca 2010-08-05 02:29:03

already tried! doesn't work. if i set "100%" the div#rest gets the 100% from the entire page. so that means it's a lot longer than the actual sidebar itself. with "auto" happens nothing.

2010-08-05 02:29:59

I'm not 100% sure but when you set "auto" you may need to change the "position" attribute. I'm in no way a CSS expert but I seen to remember that "auto" behaved differently for each type of position.

James Hulse 2010-08-05 03:12:17

Answer 2

+1 A:

What you want is something like 100% - 200px but CSS doesn't support expressions such as these. IE has a non-standard "expressions" feature, but if you want your page to work on all browsers, I can't see a way to do this without JavaScript. Alternatively, you could make all the divs use percentage heights, so you could have something like 10%-10%-80%.

Update: Here's a simple solution using JavaScript. Whenever the content in your sidebar changes, just call this function:

function resize() {
  // 200 is the total height of the other 2 divs
  var height = document.getElementById('sidebar').offsetHeight - 200;
  document.getElementById('rest').style.height = height + 'px';
};

casablanca 2010-08-05 02:35:20

do you know the javascript way?

2010-08-05 02:36:09

Updated with code.

casablanca 2010-08-05 02:54:09

Answer 3

+1 A:

Simple CSS should work for you. Use height: 100% on the rest element and overflow: hidden on the sidebar element.

Here is a test page which shows it working. I added a button to test dynamically changing the size of the side bar element.

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <title></title>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#changeSizeBtn').click(function () {
                $('#sidebar').css("height", "2000px");
            });

        });

    </script>
    <style type="text/css">
        #wrapper
        {
            margin: 0 auto;
            width: 940px;
        }
        #main
        {
            border: 1px solid black;
            width: 600px;
        }
        #sidebar
        {
            border: 1px solid black;
            float: right;
            width: 300px;
            height: 1024px;
            overflow: hidden;
        }
        .widget
        {
            border: 1px solid black;
            height: 100px;
        }
        #rest
        {
            border: 1px solid black;
            height: 100%;
        }
    </style>
</head>
<body>
    <button id="changeSizeBtn">
        Change SideBar Size</button>
    <div id="wrapper">
        <div id="header">
            Header stuff</div>
        <div id="main">
            main test
        </div>
        <div id="sidebar">
            <div class="widget">
            </div>
            <div class="widget">
            </div>
            <div id="rest">
            </div>
        </div>
    </div>
</body>
</html>

Jason Rowe 2010-08-05 02:49:20

ansaurus

tags:

views:

answers:

CSS: height- fill out rest of div?

related questions