<!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. C++之静态（static）

    一.静态数据成员与静态成员函数 二.从内存角度看静态数据成员 三.从this指针谈静态成员函数 四.注意事项 五.补充说明 1.<静态>课程评论: 静态成员是类的成员,不是对象的成员: 静 ...

  2. Codeforce 1175A From Hero to Zero

    题目链接:http://codeforces.com/problemset/problem/1175/A AC代码: #include<cstdio> #include<iostre ...

  3. 20140401 cudaHOG代码

    1.cudaHOG代码(删减没有必要的目录) cudaHOGDetect需要boost库:boost_date_time-vc100-mt-1_40.lib VC++目录->附加库目录D:\bo ...

  4. 【csp】2017-9

    1.打酱油 题目: 题意:如上. 题解:经典问题.看代码吧.qwq 代码: #include<iostream> #include<cstdio> #include<al ...

  5. Python+Django+SAE系列教程6-----本地配置Django

    前五章.我们介绍了Python的语法,本章開始介绍Django. Python的Web框架有非常多,有Django.web2py.tornado.web.py等.我们这里选 则Django.至于这些框 ...

  6. jquery中on绑定click事件在苹果手机中不起作用

    写一个div当做了一个按钮来使用. <div class="button"> <div class="sure"> 确定 </di ...

  7. SHELL脚本中执行SQL语句操作MYSQL的5种方法

    对于自动化运维,诸如备份恢复之类的,DBA经常需要将SQL语句封装到shell脚本.本文描述了在Linux环境下mysql数据库中,shell脚本下调用sql语句的几种方法,供大家参考.对于脚本输出的 ...

  8. 深度探索C++对象模型之第一章：关于对象之关键词所引起的差异

    ————如果不是为了努力维护与C之间的兼容性,C++远比现在简单的多. 如果一个程序员渴望学习C++,但是他却发现书中没有熟悉的struct,一定会苦恼,将这个主题包含到C++里,可以提供语言转移时的 ...

  9. Android开发 多媒体提取器MediaExtractor详解_将一个视频文件分离视频与音频

    前言 此篇博客讲解MediaExtractor将一个视频文件分离视频与音频,如果你对MediaExtractor还没有一个笼统的概念建议先了解我的另一篇入门博客:https://www.cnblogs ...

  10. Python自学:第四章 在for循环中执行更多操作(2)

    # -*- coding: GBK -*- magicians = ['alice', 'david', 'carolina'] for magician in magicians: print(ma ...