让两个div占据余下的高度

Question

我想让两个列占据再生空间。我不知道该做什么，两个div都具有相同的属性，但是当我为“sidebar”div设置顶级CSS属性时，它会关闭，当我为“content”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>

这是结果

我很迷茫，我不明白是怎么了发生在那里。绿线是导航栏和页面顶部的导航栏和空间，因为一个标志（由黄色块隐藏）

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>