`
johnson_gong
  • 浏览: 13205 次
  • 性别: 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生成随机交通流的案例解析》 SUMO(Simulation of Urban MObility,城市交通流动模拟)是一款开源的、跨平台的交通模拟工具,广泛应用于交通规划、交通管理以及自动驾驶研究等领域。...

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

    在你的问题中,你特别关注了`position:relative;`的作用,这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`以及与之相关的其他定位方式。 首先,我们来看`position`属性的四种主要值: 1. **...

    PE_Admin_V1.4_正式版__Keygen.rar

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

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

    压缩包中的文件名"failure_positon.m"可能是一个MATLAB脚本或函数,用于处理和分析有关输电线路故障位置的数据。MATLAB是一种广泛用于科学计算和数据分析的编程语言,特别适合处理复杂的数学和工程问题。这个文件...

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

    总结来说,`position`属性是实现前端自适应布局的重要工具之一,它可以让你精确控制元素的位置,从而创建出适应各种屏幕尺寸的网页布局。在实际开发中,熟练掌握`position`属性的使用,将有助于提升网站的可用性和...

    performance analysis of positon location in LTE systems

    ### LTE系统中的位置定位性能分析 #### 摘要与背景 本文主要探讨了LTE(Long Term Evolution,长期演进)系统中位置定位技术的性能分析。随着移动通信技术的发展,用户对网络服务的需求不再局限于语音通话和基本...

    Android代码-Recyclerview

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

    Flutter轮播图效果的实现步骤

    同时,我们使用了Stack和Positioned组件来实现html中 positon: relative/absolute布局,AnimatedOpacity组件来实现渐隐渐现动画。 在Flutter中,我们可以使用隐式动画控件来实现各种动画效果,包括轮播图效果。通过...

    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比较是否同一对象时,始终是不同对象,大家可以去验证下。...

    Android反编译代码与真实源代码对比(3)

    同样,`if positon)||positon>-1+this.adverList.size())||(this.currentIndex==positon`这样的条件语句,在反编译后可能显得较为混乱,而在原始源代码中,可能有更清晰的结构和逻辑。 ### 结论 通过对Android应用...

    音乐播放器

    8. 设置播放位置(前进或后退):`mp.seekTo(positon);` 9. 检查是否正在播放:`boolean isPlaying = mp.isPlaying();` 【音乐播放器】的界面设计也是关键的一部分。界面中通常包括播放/暂停按钮、上一曲/下一曲...

    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....

Global site tag (gtag.js) - Google Analytics