4

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

Community
  • 1
  • 1
SDwarfs
  • 3,189
  • 5
  • 31
  • 53
  • use fixed `min-height` value, not percentage – Sugar Feb 11 '13 at 10:51
  • I don't know the needed height... In the example it's clearly 300px-100px = 200px (`parent-height` minus `footer-height`). But this height is dynamic.... it might change from one moment to the other. – SDwarfs Feb 11 '13 at 10:57

1 Answers1

4

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/

Daniel Imms
  • 47,944
  • 19
  • 150
  • 166
  • Solution 2 looks good at first glance, but has the same problems as solution 1 (see: http://jsfiddle.net/LmCLz/18/). When you add a scrollbar and more content to it, it's just behind the footer. At least this seems to be more close to what I wanted. The Rearrangement is fine, since I wanted to have an own div-tag for the "content"-part either. – SDwarfs Feb 11 '13 at 11:56
  • PS: Do you have an explanation for why "position: absolute;" sometimes is relative to the parent and sometimes relative to the whole document? – SDwarfs Feb 11 '13 at 11:58
  • I adapted your solution.... This seems to work: http://jsfiddle.net/LmCLz/21/ --- Thanks for your help! ... but: I don't understand why that `
    ` is needed. Or more detailed: why I can't just give the inner `
    `-tag the class "inner"
     – SDwarfs Feb 11 '13 at 12:45
  • 1
    The point of .inner was to create a box that was the correct size (-100px for footer) so that left and right could sit at height:100%% You could probably also add the margin-bottom rule to #left and #right. – Daniel Imms Feb 11 '13 at 21:01
  • 2
    Position absolute is relative to the closest parent that is non-static. If you need to make something relative to a regularly positioned element the usual trick is to make it position:relative without the left, top, etc. – Daniel Imms Feb 11 '13 at 21:03