CSS实现div的高度填满剩余空间

<div id="main">
    <div id="nav">nav</div>
    <div id="content">content</div>
</div>
 

html, body {
    height: 100%;    //body默认高度0    height假设300px
    margin: 0px;
    padding: 0px;
}
#main {
    height: 100%;   //继承宽度  而不会继承高度
} 
#nav {
    background-color:green;
    height: 50px;
}
#content{
    background-color:pink;
    height:100%;    //继承父元素    300px   想要的是300-50px
}

正解：

<div id="main">
    <div id="nav">nav</div>
    <div id="content">content</div>
</div>
 

html, body {
    height: 100%;    //body默认高度0    height假设300px
    margin: 0px;
    padding: 0px;
}
#main {
    height: 100%;   //继承宽度  而不会继承高度
} 
#nav {
    background-color:green;
    height: 50px;
}
#content{
    background-color:pink;
    position:absolute;
    width:100%;       //定位后脱离文档流   不自动继承父元素的宽高
    top:50px;
    bottom:0px;
}