<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            #footer{

                height:50px;

                background: darkred;

                text-align: center;

                margin-top:-50px;

            }

        /*    框架撑起来*/

         html,body{

                height: %;

            }

            #wrap{

                 min-height: %;

                background: pink;

            }

            /*重点代码,主元素增高挤压下面元素*/

            #wrap .main{

                padding-bottom: 50px;

            }

        </style>

    </head>

    <body>

          <div id="wrap">

              <div class="main">

                  main增高一定高度后footer也跟着增<br />

                  main增高一定高度后footer也跟着增<br />

                  main增高一定高度后footer也跟着增<br />

                  main增高一定高度后footer也跟着增<br />

                  main增高一定高度后footer也跟着增<br />

                  main增高一定高度后footer也跟着增<br />

                  main增高一定高度后footer也跟着增<br />

                  main增高一定高度后footer也跟着增<br />

              </div>

          </div>

          <div id="footer">

              footer

          </div>

    </body>

</html>

thml粘连布局的更多相关文章

  1. 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局

    一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...

  2. CSS常见的五大布局

    本文概要 本文将介绍如下几种常见的布局: 一.单列布局 常见的单列布局有两种: header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略 ...

  3. 几种常见的CSS布局

    本文概要 本文将介绍如下几种常见的布局: 其中实现三栏布局有多种方式,本文着重介绍圣杯布局和双飞翼布局.另外几种可以猛戳实现三栏布局的几种方法 一.单列布局 常见的单列布局有两种: header,co ...

  4. CSS_细节总结

    1. 负外边距 上下200*200盒子的重叠,切记用 absolute 绝对定位 为最佳解决方案. 定位 position : fixed    absolute    relative( top 为 ...

  5. 20181207_Second_小结

    1. 上下 200*200 盒子的重叠,切记用 absolute 绝对定位 为最佳解决方案 2. 移动端多使用 粘连布局 <!DOCTYPE html> <html> < ...

  6. 底部粘连(stiky footer)布局

    前面的话 在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内 ...

  7. THML文档布局元素

    学习要点:     1.文档元素总汇     2.文档元素解析 一．文档元素总汇     文档元素基本没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念.         元素名称     ...

  8. 谈谈Ext JS的组件——容器与布局

    概述 在页面中,比较棘手的地方就是布局.而要实现布局,就得有能维护布局的容器.可以说,在我试过和使用过的Javascript框架中,Ext JS的布局是做得最棒的一个,而这得益于它强大的容器类和丰富的 ...

  9. Android仿苹果版QQ下拉刷新实现(二) ——贝塞尔曲线开发"鼻涕"下拉粘连效果

    前言 接着上一期Android仿苹果版QQ下拉刷新实现(一) ——打造简单平滑的通用下拉刷新控件 的博客开始,同样,在开始前我们先来看一下目标效果: 下面上一下本章需要实现的效果图: 大家看到这个效果 ...

随机推荐

  1. ES6 箭头函数this指向

    箭头函数有几个使用注意点. (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. (3)不可以使 ...

  2. Photon Server的Unity3D客户端配置

    Photon Server与Unity3D的交互分为3篇博文实现 (1)Photon Server的服务器端配置 (2)Photon Server的Unity3D客户端配置 (3)Photon Ser ...

  3. 8、collection

    collection 可以理解为一个容器 组织业务逻辑 导入导出 监控或者mock server 实例: 1.新建一个collection,命名为v2ex 2.保存1个请求到v2ex 3.选中v2ex ...

  4. Neo4j使用简单例子

    Neo4j Versions Most of the examples on this page are written with Neo4j 2.0 in mind, so they skip th ...

  5. 如何收集项目日志统一发送到kafka中？

    上一篇(http://qindongliang.iteye.com/blog/2354381 )写了收集sparkstreaming的日志进入kafka便于后续收集到es中快速统计分析,今天就再写一篇 ...

  6. centos安装与配置R语言

    Linux下安装R语言 一.编译安装 由于采用编译安装,所以需要用到gcc编译环境,在编译前check文件时还会用到libXt-devel和readline-devel两个依赖,所以在编译R语言源码时 ...

  7. iOS组件化开发-发布私有库

    远程索引库 将远程索引库添关联到本地 pod repo 查看本地已关联仓库源 pod repo add 本地索引库名称 远程索引库仓库地址 pod repo update 索引库名称 pod repo ...

  8. Centos7解压.tar.bz2提示tar (child): bzip2: Cannot exec: No such file or directory解决方法

    Centos7解压.tar.bz2提示tar (child): bzip2: Cannot exec: No such file or directory解决方法 原因是因为该centos没有bzip ...

  9. c结构体指针使用

    #include <stdio.h> #include<stdlib.h> #include<string.h> typedef struct _Date { un ...

  10. 如何优雅的在 vue 中添加权限控制

    前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为 ...