一直对于页面置底有一些困惑，下面这个例子不知道能不能解决

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>foot置底</title>

	<style type="text/css">

        /*html 和 body 的高度必须*/

	html,body { height:100%;}

	.wrap { position:relative; height:auto; min-height:100%;}

	.content { padding-bottom:60px; height:auto; background:yellow;}

	.footer { width:100%; height:60px; background:red; left:0; position:absolute; bottom:0;}

	</style>

</head>

<body>

	<div class="wrap">

		<div class="content">

			000

		</div>

		<div class="footer"></div>

	</div>

</body>

</html>

最后通过实践，这种方法是可以实现的

div置于页面底部的更多相关文章

  1. 【CSS】非常简单的css实现div悬浮页面底部

    <div id="demo_div"></div> <style> #demo_div{ left:; position: fixed; bot ...

  2. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  3. CSS div水平垂直居中和div置于底部

    一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...

  4. DIV+CSS:页脚永远保持在页面底部

    页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...

  5. div footer标签css实现位于页面底部固定

    Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...

  6. html 设置页脚div一直在页面底部

    先上代码 <!DOCTYPE HTML> <html lang="en" style="height: 100%; width: 100%;" ...

  7. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

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

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

  9. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

随机推荐

  1. Bat 中特殊符号

    批处理.Bat 中特殊符号的实际作用,Windows 批处理中特殊符号的作用: @\\隐藏命令的回显. ~\\在for中表示使用增强的变量扩展:在set中表示使用扩展环境变量指定位置的字符串:在set ...

  2. Web.config配置文件详解(新手必看)

    花了点时间整理了一下ASP.NET Web.config配置文件的基本使用方法.很适合新手参看,由于Web.config在使用很灵活,可以自定义一些节点.所以这里只介绍一些比较常用的节点. <? ...

  3. 【原】Redis学习资料推荐

    Redis学习资料推荐 网址: Redis官网http://redis.io/ Redis命令 http://redis.io/commands Redis教程 https://www.tutoria ...

  4. shell color

    shell 输出着色 格式: echo "/033[字背景颜色;字体颜色m字符串/033[控制码" 如果单纯显示字体颜色可以固定控制码位0m. 格式: echo "/03 ...

  5. 【HTML】Intermediate7：Sectioning

    1.</article> 2.</section> can use h1 elements at the start of each section,which would b ...

  6. BestCoder Round #81 (div.1)A

    水题...就是n的三进制后m位 #include<cstdio> #include<cstring> #include<cstdlib> #include<i ...

  7. HW3.9

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  8. UVa11404 - Palindromic Subsequence(区间DP+打印路径)

    题目大意 给定一个字符串,要求你删除尽量少的字符,使得原字符串变为最长回文串,并把回文串输出,如果答案有多种,则输出字典序最小的 题解 有两种解法,第一种是把字符串逆序,然后求两个字符串的LCS,并记 ...

  9. Codeforces10D–LCIS(区间DP)

    题目大意 给定两个序列,要求你求出最长公共上升子序列 题解 LIS和LCS的合体,YY好久没YY出方程,看了网友的题解,主要是参考aikilis的,直接搬过来好了 经典的动态规划优化. 用opt[i] ...

  10. php tcp socket 学习汇总

    推荐实例:PHP socket 深入浅出讲解:php的socket通信 基于socket.io的实时消息推送 php socket通信(tcp/udp) PHP向socket服务器收发数据 php实现 ...