分类页-占满剩余的高度 |学习笔记

开发者学堂课程【移动 Web 前端开发：分类页-占满剩余的高度】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/594/detail/8430

分类页-占满剩余的高度

一、范例

目前是一个全屏的容器，上下两个模块应该占满全屏，那么下面的容器如何占满剩余的高度。

/*主体容器*/

.jd_main{

Width:100%;

Heigt:100%;

}

如果使用以上的方法，上面的模块占 45px，下面的占 480 px，多出一块。并没有占满剩余的高度，正确的应该使下面容器的高度是 435px。方法如下

.jd_topBar{

width:100%;

height:45px;

border-bottom:1px solid #ddd;

background: url("../images/header-bg.png") repeat-x;

background-size:1px 44px;

position:absolute

left:0

top:0

}

/*主体容器*/

.jd_main

width：100%;

height:100%; I

padding-top:45px;

}

左侧分类和右侧分类具备的特点是左边不变，右边自适应。除了使用 padding 还有另外的方法实现两栏自适应。具体方法见下节。