Home/ Questions/Q 9268987
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T14:59:45+00:00

I’ve got (again) the problem of adapting a child <div> tag’s size to its

  • 0

I’ve got (again) the problem of adapting a child <div> tag’s size to its parent size. The parent element is controlled by another script (don’t want to touch that) and could be placed anywhere on the screen with variable height/width. In my example below that’s the #container. I would like to put some layout in it, which has some variable and some fixed dimensions:

  • a footer (here: #footer), having a fixed height (of e.g. 100px) and fills up the whole width of the parent
  • a navigation bar on the left (here: #left), having a fixed width (of e.g. 150px) and fills up the whole height of the upper part
  • a content part, right from the navigation bar, that is just the remaining space.

I found some solution for the “footer”, which actually works (Make a div fill the height of the remaining screen space -> the posting by ‘daniels’). But I couldn’t achieve the #left part to fill up the whole height.

Below is my example code (Online-Version: http://worldtalk.de/v2013/test.html; will not stay online forever!):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <style type="text/css" media="screen">
    * {  margin: 0; }
    html, body { height: 100%; }
    #container {
        position: absolute; /* have no control over that container element */
        width: 400px;  height: 300px;
        top: 100px;    left: 10px;
        background: red;
    }
    #upper {
        min-height: 100%;
        height:     auto !important;
        height:     100%;
        margin:     0 auto -100px; /* -100px being the size of the footer */
    }
    #footer {
        background: green;
        height: 100px;
    }
    #left {
      background: yellow;
      float: left; width: 150px;

      /* the following CSS doesn't do what I want... */

      min-height: 100%;
      height:     auto !important;
      height: 100%;
    }
    </style>
</head>
<body>
    <div id="container">
      <div id="upper">
        <div id="left">left - shall reach down until footer</div>
        content part...<br> shall be next to it...
      </div>
      <div id="footer">footer</div>
    </div>
</body>
</html>

Any ideas to achieve this without using JavaScript?

Regards,
Stefan

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Solution 1

    I assume the issue with position:absolute; is that the left navigation would be placed on top of the footer, however here is a solution using absolute for both the left nav and the footer. The flaw with it is that the left navigation continues under the footer which may or may not be an issue.

    #footer {
  position:absolute;
  left:0;
  right:0;
}

#left {
  position:absolute;
  bottom:0;
}

    http://jsfiddle.net/LmCLz/1/

    Solution 2

    Rearrange the elements like so:

    <div id="container">
    <div class="inner">
        <div id="left">left - shall reach down until footer</div>
        <div id="right">content part...<br> shall be next to it...</div>
        <div class="clear"></div>
    </div>
    <div id="footer">footer</div>
</div>

    Then apply a margin-bottom:-100px; to make room for the footer:

    .inner {
    height:100%;
    margin-bottom:-100px;
}

    http://jsfiddle.net/LmCLz/3/

    • 0