0

我在以下代码中有两个面板。第一个应该是固定大小（或自动），但第二个应该获得剩余的可用空间。

所以这就是我设置的原因，height:100%;但它仍然无法正常工作。

<html style="height:100%;">
    <body style="height:100%;">
        <div style="background-color:green;">a
        </div>
        <div style="background-color:gray; height:100%;">d
        </div>
    </body>
</html>

在视图的其余部分显示第二个面板我缺少什么。

4

1 回答 1

0

我个人喜欢使用位置：绝对。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<style>  
  html,body {
    width:100%;
    height:100%;
  }

  #Green {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:30px;
    background-color:green;
  }

  #Gray {
    background-color:gray;
    position:absolute;
    top:30px;
    left:0;
    right:0;
    bottom:0;
  }
</style>
<body>
  <div id="Green">a</div>
  <div id="Gray">d</div>
</body>
</html>

这将强制继承尊重前 30px 的 div 的全长。

于 2013-01-31T21:23:04.793 回答