一种移动端position:absolute布局：
 
1.他父级不需要加上 position:relative; 如果父级不是不是body，则加position:absolute;
2.红色加量部分是必须加
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <style>

    * {

        margin: 0;

        padding: 0;

    }

    body {

    }
    　.header{
        position: absolute;
        width: 100%;
        height: 100px;
　　　　line-height: 100px;
　      background: red;
　　　　text-align: center;　
    　}
    .content {

        position: absolute;

        overflow: auto;

        width: 100%;

        top: 100px;

        right: 0;

        bottom: 0;

        left: 0;

    }

    </style>

</head>

<body>

        <div class="header">我是标题</div>

        <div class="content">

            <div style="height:10000px;"></div>

        </div>

</body>

</html>

<script>

</script>

效果：

一种移动端position:absolute布局：的更多相关文章

  1. CSS定位:几种类型的position定位的元素

    当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...

  2. absolute布局和css布局释疑

    jqueryui也不是万能的, 有时候, 也需要自己写一些, 由 css 和jquery结合的一些东西, 如: banner中, 依次播放的div等 ## 关于jquery设计的一些思想和理念?but ...

  3. Html5移动端页面自适应布局详解(阿里rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

  4. Html5移动端页面自适应布局详解(rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

  5. position absolute 绝对定位 设置问题

     今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...

  6. 移动端网页fixed布局问题解决方案

    问题说明 移动端web的footer常常设计为fixed布局,但是在页面键盘被拉起时fixed的布局会出现问题,自己试了下,在较低版本ios和部分安卓机上会有此问题.具体问题看图示: <body ...

  7. position:absolute绝对定位解读

    position:absolute绝对定位解读  摘要   用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...

  8. html5 移动端单页面布局

    序     移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都是 ...

  9. 关于css float 属性以及position:absolute 的区别。

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...

随机推荐

  1. 使用Jsp +Js + Jquery + EasyUI + Servlet + Lucene，完成分页

    步一:创建ArticleDao.java类 public class ArticleDao { public Integer getAllObjectNum(String keywords) thro ...

  2. 小D课堂 - 新版本微服务springcloud+Docker教程_4-02 微服务调用方式之ribbon实战 订单调用商品服务

    笔记 2.微服务调用方式之ribbon实战 订单调用商品服务     简介:实战电商项目 订单服务 调用商品服务获取商品信息         1.创建order_service项目         2 ...

  3. 在HbuilderX的Uni-app中引入crypto-js md5

    在 hbuilderX的菜单“视图”中选择“显示终端”,在终端中把当前目录定位到uni-app的根目录,这样才可以把crypto-js库安装在正确的位置,在终端中键入:npm install cryp ...

  4. python基础知识（字典）

    创建字典 变量名 = {key:value,.....} zip()    转换为zip对象 空字典 变量名 = {} 变量名 = dict(key = value,....) 创建只有键的字典 fr ...

  5. Hibernate使用中防止SQL注入的几种方案

    Hibernate使用中防止SQL注入的几种方案 Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,使得Java程序员可以随心所欲的使用对象编程思维来操纵数 ...

  6. 【miscellaneous】海康威视监控摄像头实现web端无插件监控实拍效果

    [rtsp]海康威视监控摄像头实现web端无插件监控实拍效果 详细介绍参见:http://live.cuplayer.com/RtspCameraLive.html web端无须装插件(支持PC,安卓 ...

  7. [目标检测] 从 R-CNN 到 Faster R-CNN

    R-CNN 创新点 经典的目标检测算法使用滑动窗法依次判断所有可能的区域,提取人工设定的特征(HOG,SIFT).本文则预先提取一系列较可能是物体的候选区域,之后仅在这些候选区域上用深度网络提取特征, ...

  8. SQLite进阶-9.别名

    我们可以暂时给表或者列重命名为另一个名字,称为别名,重命名只是临时运行时改变,不会改变数据库中的实际的名字. -- 语法 SELECT column_name AS column_alias_name ...

  9. 处理idea加载不到Spring的xml或者properties配置文件

    在pom文件的 标签钱添加以下代码 <!--防止ieda加载不到xml或者properties文件开始--> <resources> <resource> < ...

  10. Vue学习之vue-cli脚手架下载安装及配置

    Vue学习之vue-cli脚手架下载安装及配置:https://www.cnblogs.com/clschao/articles/10650862.html 1. 先下载node.js,下载地址:ht ...