`
johnson_gong
  • 浏览: 12426 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

positon之relative.

 
阅读更多

背景介绍:

画面(容器)由上到下有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

 

 

 

分享到:
评论

相关推荐

    GPS_Satellite_Positon_Calculator.rar_GDOP_GDOP C++_GPS GDOP_GPS计

    GPS应用-卫星位置计算器。可以根据GDOP点数据的输入,计算卫星位置。

    no-random-positon.rar

    sumo交通流

    CSS中的position:relative;的作用示例介绍

    此时对象不具有边距,但仍有补白和边框 relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置 fixed : IE5.5及NS6尚不支持此属性 "对于页面中一个static的div#demo,我想让这个...

    PE_Admin_V1.4_正式版__Keygen.rar

    PE_Admin_V1.4_正式版__Keygen.rar 很好的工具

    前端界面进行自适应布局之positon属性使用

    最近使用position属性进行界面布局,在以后的开发中将要经常使用,便于以后使用方便特别把样式写在这里: 复制代码代码如下: <!DOCTYPE html PUBLIC “-//... padding:0px; width:100%; height:100%;”> <...met

    performance analysis of positon location in LTE systems

    关于定位的经典文章,入门必看,入门必看,入门必看,入门必看

    Android代码-Recyclerview

    int positon ="你指定滚动的位置"; layoutManager.scrollToPositionWithOffset(positon,0); layoutManager.setStackFromEnd(true); 2. Recyclerview 动态调整View的宽高 假如你有 10个item ,产品偶尔会让你一...

    JS实现table表格固定表头且表头随横向滚动而滚动

    2、头部外面的div用positon: relative相对定位 3、获取整个表格的高度 4、获取表格的dom(或者包裹着表格的dom)距离页面顶部的距离 offsetTop 5、滚动的零界点的距离 表格的高度+表格距离页面顶部的距离 如果滚动...

    failure_positon_输电线路_定位巡检_巡检_

    输电线路巡检定位程序,该代码效果运行效果良好

    Runtime Editor 1.3.2u.rar

    Positon, Rotation, Scale handle; BoxSelection, Selection gizmo; Scene Gizmo, Grid; Collider, Light, Audio component Gizmos; Global & Local coordinates; Center & Local pivot point mode; Scene ...

    基于MATLAB的声源定位系统

    mic1_positon=[-10,0]; mic2_positon=[0,0]; mic3_positon=[10,0]; wave = audioread('sample.wav'); wave = wave(:,1); %数组第一列 scale = 0.8/max(wave); wave = scale*wave; Trials = 10; %测试点的个数

    qt电子相册

    QString image_sum ,image_positon; Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) { ui->setupUi(this); QImage image; image.load("3.jpg"); QPalette palette;//调色板 palette...

    photoselect-仿QQ本地图片选择,包括单选,多选时图片顺序标注.zip

     不同Activity跳转时,因为要传递图片列表List,list里是自定义实体类,刚开始考虑过用intent传递,但是intent传递后,通过list.get(positon).contains比较是否同一对象时,始终是不同对象,大家可以去验证下。...

    IgH EtherCAT master-ethercatpack.7z

    (1)每个轴对应一个从站,由alias,position确定,一般来说从站不多时alias=0固定不变,对不同轴根据positon确定。 例如使能和关闭不同的轴 int interpolation_2_ecat_set_slave_pwr_on(MasterSpecifiedInfo_T *...

    在ListView中自定义Adapter

    为便于学习自定义的Adapter,本案例的界面未进行美化,功能已经实现,对于其中的getView(int position,View view ,ViewGroup vg)做了数据的填充操作。本案例功能及其简单,只涉及ListView中自定义适配器,没有对...

    数据结构严蔚敏C语言版 迷宫

    //current positon int curStep; //the ordinary number sElemType e; curPos = start; curStep = 1; do { if(pass(curPos)) //the current position is "accessed" { footPrint(curPos); e.ord = ...

    Gizmos讲解

    Gizmos.DrawRay(transform.positon,direction); } ◆ Static function DrawSphere(center:Vector3,radius:flont):void // 描述:用center和randins绘制一个球体. Function OnDrawGizmosSelected(){ Gizmos....

    MMM-NameDay:MagicMirror2平台的命名日模块

    MMM-NameDay 显示姓名天数的模块。 安装 使用终端浏览到MagicMirror的Module文件夹: cd ~/MagicMirror/modules 使用以下命令克隆此存储库: ...将以下文本添加到MagicMirror/config/config.js以激活该模块。...

    opencv程序

    int g_slider_positon = 0; CvCapture* g_capture = NULL; void onTrackbarSlide(int pos){ cvSetCaptureProperty( g_capture, CV_CAP_PROP_POS_FRAMES, pos ); } int main(int argc, char** argv){ ...

Global site tag (gtag.js) - Google Analytics