用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. 连接数据库-stone

    # -*- coding:utf-8 -*- import pymysql class mysql: def __init__(self, host, port, dbuser, dbpwd, dbn ...

  2. FTP中各文件目录的说明

    DirectAdmin:FTP中各文件目录的说明     当您使用FTP连上空间后,FTP列表会出现以下文件和目录: domains目录:网站文件存放目录:public_html目录:快捷目录,可以快 ...

  3. 2018.09.15 poj1734Sightseeing trip（floyd求最小环）

    跟hdu1599差不多.. 只是需要输出方案. 这个可以递归求解. 代码: #include<iostream> #include<cstdio> #include<cs ...

  4. 2018.08.04 spoj TTM to the moon（主席树）

    spoj传送门 vjudge传送门 主席树板子题. 支持历史版本的区间和,区间和,区间修改和时光倒流. 其中新奇一点的也只有区间修改了,这个东西直接标记永久化就行了. 如果想下传标记的话也行,需要在p ...

  5. Shell获取当前路径

    PRG="$0" while [ -h "$PRG" ]; do ls=`ls -ld "$PRG"` link=`expr "$ ...

  6. ScrollView嵌套listview ，滚动问题。设置listview不滚动

    对于ListView内部的ListView,一般用来展示少量的列表数据. 内部的ListView的高度看起来是一个固定值且无法滑动,这个就比较蛋疼了.. 提供两种解决方案,方案的核心都是重新设置内部L ...

  7. Hdu1050 Moving Tables 2016-05-19 16:08 87人阅读 评论(0) 收藏

    Moving Tables Problem Description The famous ACM (Advanced Computer Maker) Company has rented a floo ...

  8. D3_book 11.3 force

    <!-- pie example --> <!DOCTYPE html> <meta charset="utf-8"> <style> ...

  9. 团队作业第四周（HCL盐酸队）——项目冲刺（第一篇）

    任务认领情况: 1.坦克类实现:李密,卢泰佑 2.子弹类,线程类实现:黄国航 赖少勇 3.画笔类,地图的实现:陈舒标  黄宇航 明日任务安排: 今天在通过已经购买的GUI书籍的帮助下,已经实现了界面的 ...

  10. css控制英文内容自动换行問題

    css控制英文内容自动换行 HTML: <!-- 因为要显示的内容是用户通过CMS添加进入数据库,再抓取出来前台显示的,所以你根本无法 控制每一行内容的长度. 所以我在显示内容的div设置了一个 ...