html自动分栏,html自适应页面上下左右分栏的处理技巧

html自适应页面上下左右分栏的效果可以借用CSS或者jQuery进行处理。

CSS中的width和height属性的值带%的情况：

height:100% 代表基于包含它的块级对象(即父元素)的百分比高度，此时为100%。

width:100% 代表基于包含它的块级对象(即父元素)的百分比宽度，此时为100%。

使某元素(例如id为container的元素)占据整个页面的全部时的CSS代码如下：

#container {

width: 100%;

height: 100%;

}

简单的带有的头注和脚注页面实例：

html,body {margin:0;padding:0;

}

#mainContainer {

height:100%;

width:100%;

}

#header {

height:15%;

width:100%;

background-color:red;

}

#center {

height:75%;

width:100%;

background-color:blue;

}

#footer {

height:10%;

width:100%;

background-color:pink;

}

Header

Center

Footer

假如当一个父元素中有两个或多个元素时，需要其中一个元素占据除其他元素所占的空间之外剩下的所有空间，则可以在页面初始化后通过jQuery修改它的高度和宽度属性。

例如，其他元素总共占父元素高70像素、宽25像素的空间且都在一成片区域，父元素宽也为25像素。

// 页面初始化后调用

$(document).ready(function () {

// 使窗口最大化

if (document.body.offsetWidth < screen.width) {

try {

window.moveTo(0, 0);

window.resizeTo(window.screen.availWidth, window.screen.availHeight);

} catch (e) {

throw e;

}

// 使mainContent的高度为父元素的全部高度减去70像素的高度

$(".mainContent").css('height', '100%').css('height', '-=70px');

// 使mainContent的宽度为父元素的全部宽度减去25像素的宽度

$(".mainContent").css('width', '100%').css('width', '-=25px');

}); 参考自：css width: calc(100% -100px); alternative using jquery http://stackoverflow.com/questions/11117216/css-width-calc100-100px-alternative-using-jquery

html自动分栏,html自适应页面上下左右分栏的处理技巧相关推荐

android 高度上分权重,安卓自适应布局(关于权重weight的使用技巧!)
weight和weightSum Layout Weight LinearLayout also supports assigning a weight to individual children ...
基于Jquery的图片自动分组且自适应页面的缩略图展示特效
今天分享的是一款基于Jquery的图片自动分组且自适应页面的缩略图展示特效,通俗一点说就是JS相册,不过是用JQuery做的,相当不错! This experimental jQuery plugin ...
自动解题批改与自适应学习 AI在教育行业的应用实践
自动解题批改与自适应学习 AI在教育行业的应用实践因校内业务的需求,学霸君一直非常注重人工智能相关技术的研发.通用人工智能技术非常难做,但与垂直行业场景结合起来,降低算法的难度,使得算法找到用武之地 ...
页面怎么导出html文件大小,报表HTML导出时自适应页面大小
第1章概述默认情况下,报表在浏览器中是按实际大小显示的,所以当报表的大小超过浏览器的显示区域时,就会出现水平或垂直滚动条.这对于在Dashboard中展现的报表可能是一个问题.为避免出现滚动条,需 ...
jQuery实现等比例缩放大图片让大图片自适应页面布局
在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面 ...
html iframe自动高度,iframe高度自适应撑开
iframe在div中如何自适应高度 div中的iframe高度和宽度自适应的问题我用bootstrap布局,上边部分为导航菜单,左边为一级菜单. DIV里嵌套Iframe,让Iframe及DIV高 ...
如何删除下一页分节符_页面布局里分节符添加的下一页空白页怎么删 - 卡饭网...
word2010怎么插入分节符 word2010怎么插入分节符通过在Word2010文档中插入分节符,可以将Word文档分成多个部分.每个部分可以有不同的页边距.页眉页脚.纸张大小等不同的页面设置. ...
企业级个人免签虚拟商品卡密点卡自动发卡网平台自适应源码支持易支付分销
企业级个人免签虚拟商品卡密点卡自动发卡网平台自适应源码支持易支付分销支持: 1 后台实时平台大数据可视化展示功能,非常的亮眼和好用. 2 支持api对接,可以对接自己需要的支付接口.图片接口和文件存 ...
百度ueditor自适应(编辑器自适应页面，图片上传宽高，等)
1.编辑器自适应页面在实例化编辑器时加上 initialFrameWidth:'100%',//初始化编辑器宽度代码  <script id=& ...
html5 两栏等宽布局代码,分三栏栏宽相等如何将合并的一段分为等宽三栏，栏宽为4.5厘米...
将正文的最后一段分成等宽的三栏,栏间加分隔线.将正文的最后一段分成等宽的三栏,栏间加分隔线. 方法步骤如下: 打开需要操作的WORD文档,选中正文最后一段,点击页面布局中的"更多分栏&quo ...

html自动分栏,html自适应页面上下左右分栏的处理技巧

html自动分栏,html自适应页面上下左右分栏的处理技巧相关推荐

最新文章

热门文章