Question

我（再次）遇到了将子<div>标签的大小调整为其父级大小的问题。父元素由另一个脚本控制（不想触摸它），并且可以放置在屏幕上具有可变高度/宽度的任何位置。在我下面的例子中，#container。我想在其中放置一些布局，它有一些变量和一些固定的尺寸：

页脚（此处为#footer），具有固定高度（例如100px）并填充父级的整个宽度
左侧的导航栏（此处为#left），具有固定宽度（例如150px）并填满上半部分的整个高度
内容部分，从导航栏开始，就是剩余空间。

我找到了“页脚”的一些解决方案，实际上有效（Make a div fill the height of the remaining screen space - ＆gt;'daniels'发布）。但我无法实现#left部分以填满整个高度。

以下是我的示例代码（在线版本：http://worldtalk.de/v2013/test.html;不会永远在线！）：

<!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>

任何想法都可以在不使用JavaScript的情况下实现这一目标吗？

此致斯蒂芬

Answer 1

解决方案1 

我认为position:absolute;的问题在于左侧导航将放置在页脚顶部，但是这里是左侧导航和页脚使用绝对的解决方案。与之相关的缺陷是左侧导航在页脚下继续，这可能是也可能不是问题。

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

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

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

解决方案2

重新排列元素如下：

<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>

然后应用margin-bottom:-100px;为页脚腾出空间：

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

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

CSS：设置div高度以填充父div，无位置：绝对;

1 个答案: