4

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

  • 一个页脚（这里：）#footer，具有固定的高度（例如 100 像素）并填满父级的整个宽度
  • 左侧的导航栏（此处#left：），具有固定宽度（例如 150 像素）并填满上部的整个高度
  • 导航栏右侧的内容部分，即剩余空间。

我为“页脚”找到了一些解决方案，它确实有效（让一个 div 填充剩余屏幕空间的高度-> '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 的情况下实现这一目标？

问候，斯特凡

4

1 回答 1

4

解决方案 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>

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

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

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

于 2013-02-11T11:01:40.903 回答