DIV占满剩余高度

需求：

1. 这个矩形的高度和浏览器窗口的高度相同，不能出现纵向滚动条

2. 绿色部分高度固定，比如50px

3. 紫色部分填充剩余的高度

 

HTML结构暂且如下：

<div id="main">

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

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

</div>

 

CSS如下：

#nav {

    background-color: #85d989;

    width: 100%;

    height: 50px;

}

#content {

    background-color: #cc85d9;

    width: 100%;

    position: absolute;

    top: 50px;

    bottom: 0px;

    left: 0px;

}

 

重点是要top和bottom一起使用，这是很反常规的用法。

转载于:https://my.oschina.net/tywali/blog/676948