欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

positon之relative.

程序员文章站 2022-07-15 14:22:33
...

背景介绍:

画面(容器)由上到下有header,toolBar,body,footer四个区域,

1.画面的高度固定;

2.header, footer,toolBar高度可变,比如:默认height: 30px;可是内部元素

增加后需要"换行",所以高度会增加。

3.body的高度随之改变。即: 画面height - header height - toolBar height - footer Height;

 

关键点: 

整个画面(容器)及其子元素 采用 相对定位, 需要合理设置内部元素的高度来"撑满"画面。

即: 只需要将 body区域的高度设置正确,整个画面的高度就正确了。

 

ps: 如果用绝对定位的话,我认为相对麻烦。

 

补充:

采用JQuery来获取元素高度,

$(selector).height();

$(selector).innerHeight();// 包括padding

$(selector).outerHeight();// 包括padding, border

$(selector).outerHeight(true);// 包括padding, border, margin