【发布时间】：2013-01-26 11:09:35
【问题描述】：
我（再次）遇到了将子 <div> 标签的大小调整为其父大小的问题。父元素由另一个脚本控制（不想触摸它），并且可以放置在屏幕上具有可变高度/宽度的任何位置。在下面的示例中，这是#container。我想在里面放一些布局，它有一些可变的和一些固定的尺寸：
- 页脚（此处为：
#footer），具有固定高度（例如 100 像素）并填满父项的整个宽度 - 左侧的导航栏（此处为：
#left），具有固定宽度（例如 150 像素）并填满上部的整个高度 - 导航栏右侧的内容部分，即剩余空间。
我为“页脚”找到了一些解决方案，它确实有效（Make a div fill the height of the remaining screen space -> '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 的情况下实现这一目标？
问候， 斯蒂芬
【问题讨论】：
-
使用固定的
min-height值，而不是百分比 -
我不知道所需的高度...在示例中显然是 300px-100px = 200px（
parent-height减去footer-height）。但这个高度是动态的......它可能会从一个时刻到另一个时刻发生变化。
标签： html css height parent-child