用position:absolute和top,left,bottom,right进行设置可以进行页面的头部，底部，左边框，内容的自适应布局，可以代替position:fixed;

<!DOCTYPE html>
<html>
<head>
<meta name="name" content="content" charset="utf-8">
<title>absolute布局</title>
<style type="text/css" media="screen">
.header{position: absolute;left: 0;right: 0;height: 60px;background-color: #cfcfcf;top:0;text-align: center;line-height: 60px;}
.aside{position:absolute;left: 0;top: 60px;width: 80px;bottom: 0;background-color: #666666;text-align: center;}
.content{position: absolute;left: 80px;top: 60px;bottom: 60px;right: 0;background-color: #3d85c6;text-align: center;}
.footer{position: absolute;left: 0;right: 0;height: 60px;bottom: 0;background-color: #6aa84f;text-align: center;}
</style>
</head>
<body>
<div class="header">header</div>
<div class="aside">aside</div>
<div class="content">
content
</div>
<div class="footer">
footer
</div>
</body>
</html>

效果如下：

移动端：

pc端：

用absolute进行页面的自适应布局的更多相关文章

  1. 微信小程序新单位rpx与自适应布局

    rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我 ...

  2. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

  3. css之页面三列布局之左右上下高度固定，中间自适应

    第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...

  4. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  5. BFC之宽度自适应布局篇

    说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...

  6. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  7. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  8. css 多栏自适应布局

    在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...

  9. 移动端Web App自适应布局探索

    1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...

随机推荐

  1. OSGi 系列（六）之服务的使用

    OSGi 系列(六)之服务的使用 1. 为什么使用服务 降低服务提供者和服务使用者直接的耦合,这样更容易重用组件 隐藏了服务的实现细节 支持多个服务的实现.这样你可以互换这实现 2. 服务的使用 2. ...

  2. WCF TOOL CODE

    .HTML <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WCFTool. ...

  3. 一款非常好用的boostrap的验证插件、再也不用自己手写正则表达式和js了

    基于jquery.bootstrap数据验证插件bootstrapValidator教程 bootstrap:能够增加兼容性的强大框架. 因为项目需要数据验证,看bootstrapValidator ...

  4. 2018.09.16 atcoder Garbage Collector（贪心）

    传送门 昨晚打比赛的时候不是很机智啊. 这道题贪心就能过了. 我们可以发现一个明显的结论,每次选的垃圾的距离从大到小排序之后,每个距离对答案的贡献的系数是5,5,7,9,11-也就是最远的是5,其余都 ...

  5. yii2 HTML组手

    1.样式和脚本 1.1 Yii 提供两个方法用于生成包含内联样式和脚本代码的标签. <?= Html::style('.danger { color: #f00; }') ?> Gives ...

  6. Linux将程序添加到服务的方法（通用）

    一:咱们通过这篇文章来演示怎么将某个程序作为服务(就类似Windows服务可以开机自动启动),这里以tomcat为例,已经亲测过: 二:步骤(最好用root用户来做这种事情,切换root用户记得su ...

  7. python 文件合并和编号

    # -*- coding:utf-8 -*- import os import re p1=r"([0-9][0-9][AB])\.\w{3}$" pattern1=re.comp ...

  8. 微信post xml 消息编码问题

    site:mp.weixin.qq.com utf 微信卡券接口说明 - 微信公众平台开发者文档 所有API接口POST的数据只支持utf8编码,否则会返回报错. 以上是获取的部分信息 这个尽管有点模 ...

  9. 17）maven-surefire-plugin

    http://maven.apache.org/surefire/maven-surefire-plugin/ Goals Overview The Surefire Plugin has only ...

  10. 在 web 容器中运行 cxf

    <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE web-app PUBLIC &q ...