用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. Android Activity切换(跳转)时出现黑屏的解决方法

    在两个Activity跳转时,由于第二个Activity在启动时加载了较多数据,就会在启动之前出现一个短暂的黑屏时间,解决这个问题比较简单的处理方法是将第二个Activity的主题设置成透明的,这样在 ...

  2. Python中的编码和解码问题

    关于Python中遇到的中文字符串的读取和输入时总是遇到一堆问题,到现在还不是特别明白,只是有了一个大概率的理解,就是:字符串是用什么编码格式编码的,就用什么编码格式来解码. encode()对字符串 ...

  3. NET(C#)连接各类数据库-集锦

    1.C#连接连接Access程序代码:------------------------------------------------------------------------------- u ...

  4. 2018.07.03 POJ 2318 TOYS（二分+简单计算几何）

    TOYS Time Limit: 2000MS Memory Limit: 65536K Description Calculate the number of toys that land in e ...

  5. IntelliJ IDEA 2017版 spring-boot使用Spring Data JPA搭建基础版的三层架构

    1.配置环境pom <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  6. MySQL性能调优与架构设计——第 16 章 MySQL Cluster

    第 16 章 MySQL Cluster 前言: MySQL Cluster 是一个基于 NDB Cluster 存储引擎的完整的分布式数据库系统.不仅仅具有高可用性,而且可以自动切分数据,冗余数据等 ...

  7. Codeforces805 A. Fake NP 2017-05-05 08:30 327人阅读 评论(0) 收藏

    A. Fake NP time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  8. hdu 2049 不容易系列之考新郎 && 对错排的详解

    题目 错排:  当n个编号元素放在n个编号位置,错排的方法数记着D(n) ⒈把第n个元素放在一个位置,比如位置k,一共有(n-1)种方法: ⒉放编号为k的元素,这时有两种情况: 1°把它放到位置n,那 ...

  9. springMVC 开涛 数据绑定

    纸上得来终觉浅,绝知此事要躬行. 一.@requestParam //使用方法URL:?username="sfp" test(@RequestParam(value=" ...

  10. 结对编程-四则运算生成器(java实现)

     结对伙伴:陈振华  项目要求 1.题目:实现一个自动生成小学四则运算题目的命令行程序. 2.需求: 1. 使用 -n 参数控制生成题目的个数 2. 使用 -r 参数控制题目中数值(自然数.真分数和真 ...