用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. JVM 系列 ClassLoader

    JVM 系列()ClassLoader 在前面一节中,主要介绍了 Class 的装载过程,Class 的装载大体上可以分为加载类.连接类和初始化 3 个阶段.本小节将主要介绍绍 Java 语言中的 C ...

  2. source Insight工程的简单使用

    本文以管理虚拟机里面的uboot为例: 1.选择project->New project->选择工程路径,假设为D:\uboot:->project has its own conf ...

  3. 【Mac】使用PicGIF制作gif动态图片

    动态图片是我们常常需要的,mac系统下制作gif图片,可以使用PicGIF,AppStore中有一个简单版本免费的 环境与工具 1.mac系统 2.PicGIF Lite(可以在AppStore下载) ...

  4. 2018.08.30 NOIP模拟 wall（模拟）

    [问题描述] 万里长城是中国强大的标志,长城在古代的用途主要用于快速传递军事消息和抵御 外敌,在长城上的烽火台即可以作为藏兵的堡垒有可以来点燃狼烟传递消息. 现在有一段 万里长城,一共有 N 个烽火台 ...

  5. 着重基础之—Java 8 Comparator: How to Sort a List （List排序）

    着重基础之—Java 8 Comparator: How to Sort a List (List排序) 首先申明,这篇博客的内容不是我自己的知识,我是从国外网站搬来的,原因有二:1是因为大天朝对网络 ...

  6. （有点递归的感觉）RGCDQ--hdu--5317

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5317 感觉好神奇呀,一堆数在一起可以找到规律,学长讲完后,觉得自己是如此的so young f[x] ...

  7. (网络流 匹配 KM) Going Home --poj -- 2195

    链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82835#problem/D 有n个人有n栋房子,每栋房子里能进一个人,但每走一格 ...

  8. 如何使用C++11实现C#属性概念设计

    目录(原创博客,版权所有,转载请注明出处 http://www.cnblogs.com/feng-sc) 1.概述 2.C#属性的概念  2.1.简单示例代码介绍C#中的属性  2.2.C++实现效果 ...

  9. 如何手动编译java文件

    1,在编辑框中,将目录切至java文件所在的地址 如图 2,开始编译java文件 用命令javac 编译目标java文件,文件需带后缀名 ; 用java 执行class, 此时class文件无需带后缀 ...

  10. Resharper 修改命名空间

    1. 使用Reshared 右键->Refactor->Rename 修改所有文件的命名空间(鼠标移动到对应类的命名空间) 2.修改类库中的命名空间 包括程序集信息 右键->属性 3 ...