html：

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>css:
* {
margin: 0;
}

html, body {
height: 100%;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}

.footer, .push {
height: 4em;
}margin负值为footer的高度，相当于减去了footer的高度。

如何让footer一直在网页底部（不使用绝对定位并且网页不论长度多长）的更多相关文章

  1. 记一些让footer始终位于网页底部的方法

    上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...

  2. footer固定在页面底部的实现方法总结

    方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...

  3. 网站设计:将Footer固定在浏览器底部

    在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部. function fi ...

  4. 用CSS实现定位DIV绝对位于网页底部

    网上有一些解决方案,但会出现当改变窗口高度时,底部和正文重叠的BUG.尽管没有多少人会有事没事儿的去改变窗口高度,但设计嘛,追求的就是尽善尽美. 下面是我找到的一个比较完美的方法,来自国外的设计达人, ...

  5. HTML 中使 footer 始终处于页面底部

    通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位 &l ...

  6. CSS-设置Footer始终在页面底部

    Footer顾名思义页脚,如果内容多的时候在底部时感官很好,但是当内容变少(无法撑开一屏的时候)footer不固定在底部,影响美观,对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了,由 ...

  7. css方法div固定在网页底部

    css .bottom{width:%;height:40px;background:#ededed;;}/*重点后两句*/ body <div class="bottom" ...

  8. HTML中footer固定在页面底部的若干种方法

    <div class="header"><div class="main"></div></div> <d ...

  9. HTML的footer置于页面最底部

    vue项目中,使用element-ui的布局,仍然出现footer不固定页面底部的情况,网上找到的一个管用的 方法是:footer高度固定+绝对定位 <html> <head> ...

  10. 让footer固定在页面底部（CSS-Sticky-Footer）

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

随机推荐

  1. Word2vec之CBOW

    一.Word2vec word2vec是Google与2013年开源推出的一个用于获取word vecter的工具包,利用神经网络为单词寻找一个连续向量看空间中的表示.word2vec是将单词转换为向 ...

  2. URAL 1936 Roshambo（求期望）

    Description Bootstrap: Wondering how it's played? Will: It's a game of deception. But your bet inclu ...

  3. PHP 用Symfony VarDumper Component 调试

    Symfony VarDumper 类似 php var_dump() 官方文档写的安装方法 : 按照步骤 就可以在 running any PHP code  时候使用了 In order to h ...

  4. BFS搜索

    参考博客:[算法入门]广度/宽度优先搜索(BFS) 适用问题:一个解/最优解 重点:我们怎么运用队列?怎么记录路径? 假设我们要找寻一条从V0到V6的最短路径.(明显看出这条最短路径就是V0-> ...

  5. Java课程设计--学生成绩管理系统

    一.团队名称: 团队成员 林艺薇 201721123032 网络1712 黄毓颖 201721123033 网络1712 唐川 201721123034 网络1712 梁才玉 201721123038 ...

  6. lintcode-64-合并排序数组 II

    64-合并排序数组 II 合并两个排序的整数数组A和B变成一个新的数组. 注意事项 你可以假设A具有足够的空间(A数组的大小大于或等于m+n)去添加B中的元素. 样例 给出 A = [1, 2, 3, ...

  7. linux之shell脚本学习篇一

    此文包含脚本服务请求,字符串截取,文件读写内容,打印内容换行. #!/bin/bashretMsg="";while read LINEdo        echo "t ...

  8. Java基础——集合

    java的集合类是一个工具类,存放在java.util包中.它不仅可以存储对象,也可以实现常用数据结构,如栈.队列等.严格的说,集合类存放的是对象的引用,而不是对象本身. java集合主要由这两个接口 ...

  9. bootstrap和elementUI真的会冲突

    前两天,做了一个支持markdown的功能: http://www.cnblogs.com/XHappyness/p/8097756.html 后面发现预览效果某些标签需要bootstrap的支持才能 ...

  10. web颜色转换为delphi

    今天在写写一个日志浏览和报警功能时,要求用多种颜色去显示不同的信息,客户给出的颜色是web的 rgb颜色,就是用6位16进制数去表示的颜色,直接把他赋值给Delphi的TColor变量,发现显示的颜色 ...