Question

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

这就是我设置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>

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

Answer 1

我个人喜欢使用position：absolute。

<!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>

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

如何设置第二个div的高度占用剩余空间？

1 个答案: