使两个div占据剩余高度

Question

我想让两列占据再生空间。我不知道该怎么做，两个div都具有相同的属性，但是当我为“sidebar”div设置顶级CSS属性时，它会下降，当我为“content”div设置它时，它会上升。 / p>

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

这是结果

我很困惑，我不明白那里发生了什么。绿线是导航栏，导航栏和页面顶部之间的空格是因为徽标（由黄色块隐藏）

Answer 1

＆＃13;

＆＃13;

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;
}
  

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;