<!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. LeetCode 183. Customers Who Never Order (从不订购的客户)

    题目标签: 题目给了我们 Customers 和 Orders 两个表格,让我们找到 从没订购过的客户. 首先从Orders 得到 订购过的CustomerId,然后再去Customers 里找 没有 ...

  2. [zz]winform 窗体关闭事件

    注册窗体关闭事件: 在Form1.Designer.cs 文件中添加: this.FormClosing += new System.Windows.Forms.FormClosingEventHan ...

  3. CVE-2017-3248简单复现

    我是这样操作的 目标跟windows在一个段,linux是另一个段的,我的虚拟机 windows主机上 `java -cp ysoserial.jar ysoserial.exploit.JRMPLi ...

  4. 如何在windows上把你的项目提交到github（转载）

    (1)如何在windows上把你的项目提交到githubhttp://michaelye1988.iteye.com/blog/1637951 (2)github错误提示:fatal:remote o ...

  5. List<Map>中根据map的同一指标项数据——去重代码

    先看网络上,博客经常出现的错误代码: for(ABatchAddCheckVO aBatchAddCheckVO : addList){ dto.put("aac001",aBat ...

  6. Hadoop的局限与不足

  7. mock.js使用教程

    转载自:https://blog.csdn.net/qq_42205731/article/details/81705350 cdn引入文件 :<script src="http:// ...

  8. mysql 的特殊函数

    1. FORMAT() 函数 函数用于对字段的显示进行格式化 语法: SELECT FORMAT(column_name,format) FROM table_name column_name  必需 ...

  9. Perl 标量

    Perl 标量 标量是一个简单的数据单元. 标量可以是一个整数,浮点数,字符,字符串,段落或者一个完整的网页. 以下实例演示了标量的简单应用: 实例 #!/usr/bin/perl $age = 20 ...

  10. 概率dp——逆推期望+循环迭代zoj3329

    首先要推出dp[i]的期望方程,会发现每一项都和dp[0]相关, 那我们将dp[i]设为和dp[0]有关的式子dp[i]=a[i]*dp[0]+b[i],然后再回代到原来的期望方程里 然后进行整理,可 ...