小白问题,两个DIV,一个固定高度,另外一个怎么撑满窗口余下高度?

body高度100%;
比如A是顶部栏 height:50px;
B的高度怎么设置,使A+B=body高度?

另外一个问题
另外如果A的position是fixed呢;B又该怎么设置

阅读 5.3k
2 个回答

B设置position:absolute; top:50px;bottom:0px;

用flex比较好

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
  .ab {
    width: 100px;
    height: 300px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
  }
  .a {
    height: 100px;
    background-color: yellow;
  }
  .b {
    flex: 1;
    background-color: red;
  }
  </style>
</head>
<body>
  <div class="ab">
    <div class="a">100</div>
    <div class="b">剩余</div>
  </div>
</body>
</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题