Question

在容器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: ??     |
| |        | |           |
| +--------+ |           |
+------------+-----------+

此代码有什么问题？

Answer 1

您是否希望将此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>

一个div固定高度，另一个div保持垂直空间，使其达到窗口高度的100％

1 个答案: