0

在一个容器 div 里面我有两个 div。Div-A 是固定高度，而 Div-B 应该填充剩余空间以使其 100% 成为浏览器窗口：

+------------------------+ #container
| +--------------------+ |
| |       Div-A        | |
| |    (height:60px)   | |
| +--------------------+ |
| +--------+ +---------+ |
| |        | |         | |
| |        | |         | |
| |  Div-B | | Div-C   | |
| |w: 25px | | W: ??   | |
| |H: ??   | | H: ??   | |
| |        | |         | |
| +--------+ +---------+ |
+------------------------+

我有以下风格：

body, html{
min-height: 100%;
}

#container{
 position: absolute;
 top: 0px;
 left: 2px;
 bottom: 2px;
 right: 2px;
 }
#div-a{
 height: 60px;
 }
#div-b{
 float: left;
 min-height: 100%;
 width: 25px;
 margin-bottom: 2px;
 background: url('img.png') 0 0;
 background-repeat: repeat-y;
 }
#div-c{
 position: relative;
 margin: 2px 2px 2px 25px;
 min-height: 100%;
 }

但它没有按预期工作。Div-C 与容器 div 重叠，因为 Div-C 的左边距为 25px（即 Div-C 的宽度变为 25px+100%），Div-A 的高度为 60px（即 Div-C 的高度变为 60px+ 100%）。因此，由于重叠，Div-C 的右下边距没有创建。

+------------------------+ #container
| +--------------------+ |
| |       Div-A        | |
| |    (height:60px)   | |
| +--------------------+ |
| +--------+ +-----------+ 
| |        | |           |
| |        | |           |
| |  Div-B | | Div-C     |
| |w: 25px | | W: ??     |
| |H: ??   | | H: ??     |
| |        | |           |
| +--------+ |           |
+------------+-----------+

这段代码有什么问题？

4

1 回答 1

0

你想应用这个符合你要求的css吗

body, html {
    min-height: 100%;
}
#container {
    margin: 0 auto;
    height: 400px;
    width: 400px;
    padding: 0px;
    border:1px solid #ccc;
}
#div-a {
    height: 16%;
    width: 96%;
    float: left;
    margin: 2%;
    background: #ddd888;
}
#div-b {
    float: left;
    min-height: 78%;
    width: 46%;
    margin: 0% 2% 2% 2%;
    background: #bbb;
}
#div-c {
    float: left;
    min-height: 78%;
    width: 48%;
    margin: 0% 2% 2% 0%;
    background: #000;
}

和 html 它为您提供充分的帮助

<div id="container">
  <div id="div-a"></div>
  <div id="div-b"></div>
  <div id="div-c"></div>
</div>
于 2013-12-04T06:21:36.420 回答