html - 让两个div占据剩余高度

Question

我想让两列占据剩余空间。我不知道该怎么做了，两个 div 具有相同的属性，但是当我为“侧边栏”div 设置顶部 CSS 属性时它下降，当我为“内容”div 设置它时它上升。

#wrapper {
  width: 100%;
  float: right;
  display: block;
  position: relative;
}

#sidebar {
  top: 153px;
  width: 20%;
  height: 10000px;
  background-color: white;
  height: 100%;
  overflow: hidden;
  float: left;
  left: 0;
  bottom: 0;
  position: absolute;
  display: block;
}

#content {
  height: 100%;
  width: 80%;
  float: right;
  background-color: yellow;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  right: 0;
  display: block;
}

body {
  position: relative;
  height: 500px;
}

<div id="wrapper">
  <header></header>

  <div id="content">
    <section>
      content
    </section>
  </div>

  <div id="sidebar">
    sidebar
  </div>
  <div class="clear"></div>
</div>

这是结果

我很困惑，我不明白里面发生了什么。绿线是导航栏，导航栏和页面顶部之间的空间是因为一个标志(被黄色 block 隐藏)

Answer 1

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container{
  position: relative;
  width: 100%;
  height:100%;
}

.navbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: green;
}

.sidebar {
  position: absolute;
  width: 100px;
  top:50px;
  bottom:0;
  left: 0;
  background-color: red;
}

.content{
  position: absolute;
  top: 50px;
  bottom: 0;
  left: 100px;
  right: 0;
  background-color: blue;
}
  

<div class="container">
  <div class="navbar"></div>
  <div class="sidebar"></div>
  <div class="content"></div>
</div>