<!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. csp-s模拟测试99

    csp-s模拟测试99 九九归一直接爆炸. $T1$一眼板子. $T2$一眼语文题(语文的唯一一次$120+$是给模拟出来的可知我的语文能力). $T3$一眼普及题. ?? Hours Later 板 ...

  2. [JZOJ 5129] 字符串

    题意:统计本质不同的串的个数. 思路: 显然后缀自动机,对于每个串建一个\(SAM\)统计即可. #include <bits/stdc++.h> using namespace std; ...

  3. Shader实现新手指引挖空圆形和矩形

    这个是参考这个做的:https://blog.csdn.net/tracyzly/article/details/80279692 Shader "UI/ImageWithHole" ...

  4. ActiveMQ任意文件写入漏洞（CVE-2016-3088）

    上传webshell 容器用vulhub的 PUT一个jsp文件 MOVE到api目录 默认的ActiveMQ账号密码均为admin,首先访问http://your-ip:8161/admin/tes ...

  5. mobile开发技巧

    1.隐藏地址栏 很多文档介绍通过调用 window.scrollTo(0, 1); 就可以隐藏地址栏,但是通过实践发现隐藏地址栏还是真够坑爹的啊,只调用这一句话一般不会起作用,我们需要 functio ...

  6. nodejs--express安装失败的原因

    1.检查更新所有的npm ,jade,或者ejs. 2.在用jade或ejs也是有区别的,jade适合个人秀,ejs更实用与商务. 3.express在4.+之后的版本都分离了,推荐用3.+的版本稳定 ...

  7. String 字符串对象

    String是什么 String字符串,是一种引用数据类型,并不是基础数据类型. 对于基础数据类型和引用数据类型的区别: 基础数据类型,在创建时直接将值存放在栈内存中. 引用数据类型,在创建时栈内存中 ...

  8. 流计算与Hadoop

  9. cordova 插件发布到 npm

    cordova 插件发布到 npm Cordova插件开发(3)- 将Cordova插件发布到npm could not find an installed version of gradle eit ...

  10. 小程序template怎样渲染页面的

    template模板渲染demo wxml页面 <view class="btmcon"> <text class="btmtitle"> ...