文档章节

DIV+CSS让footer始终在底部

沉默的懒猫
 沉默的懒猫
发布于 2016/06/12 16:28
字数 189
阅读 7
收藏 0
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<style>
body,html {
    margin: 0;
    padding: 0;
    font: 12px/1.5 arial;
    height: 100%;
}

#content {
    min-height: 100%;
    position: relative;
}

#main {
    padding: 10px;
    padding-bottom: 60px;
}

header {
    background-color: #AAA;
}

footer {
    position: absolute;
    bottom: 0;
    background-color: #AAA;
    width: 100%;
    padding: 10px 0;
}

footer h1 {
    font: 20px/2 Arial;
    margin: 0;
    padding: 0 10px;
}
</style>

<body>
    <div id="content">
        <header> 头部 </header>
        <div id="main">
            <h1>hi</h1>
            <p>观察footer效果。</p>
            <p>asdfsdfsdfsdf</p>
            <!-- <script type="text/javascript">
                for(var i = 1; i<=155;i++){
                    document.write(i + "<br />");
                }
            </script>-->
        </div>
        <footer>
            <h1>Footer</h1>
        </footer>
    </div>
</body>
</html>

 

© 著作权归作者所有

上一篇: easyui 扩展loading
下一篇: spring重定向传参
沉默的懒猫
粉丝 9
博文 103
码字总数 81208
作品 0
海淀
程序员
私信 提问
CSS实现footer“吸底”效果

我们经常会遇到这样的问题:如何用css来实现底部元素可“粘住底部”的效果,对于“粘住底部”,本文有两种理解: 一是无论内容的多少,我们都希望使按钮,固定于可视窗口的底部,且内容区是可...

Sunflower127
2018/10/10
0
0
DIV+CSS规范命名大全集合

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇。 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS命...

0000001
2014/08/12
176
0
底部始终在最底部的五种方法

1.设置下边距为负值等于底部高度 css: html, body { height: 100%; margin: 0 } .footer { width: 100%; background-color: firebrick; } .content { min-height: 100%; margin-bottom: -50......

kenneth5530
2016/11/15
29
0
如何给网页css样式起个好名字?

页头:header 如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav ...

我输过但从未怕过
2016/03/04
55
0
nginx模块nginx-http-footer-filter(淘宝开发)

nginx-http-footer-filter想必大家都觉得很陌生,那我们就来认识一下它吧,这是淘宝开发的nginx模块. 它用于nginx在响应请求文件底部追加内容. 今天抽空研究下这个插件,希望对大家有所帮助。为...

小运
2013/08/26
6K
16

没有更多内容

加载失败,请刷新页面

加载更多

堆”和“栈

C++作为一款C语言的升级版本,具有非常强大的功能。它不但能够支持各种程序设计风格,而且还具有C语言的所有功能。我们在这里为大家介绍的是其中一个比较重要的内容,C++内存区域的基本介绍。...

SibylY
34分钟前
3
0
总结:Https

一、介绍 简单理解,https即在http协议的基础上,增加了SSL协议,保障数据传输的安全性。 它由以前的http—–>tcp,改为http——>SSL—–>tcp;https采用了共享密钥加密+公开密钥加密的方式 ...

浮躁的码农
36分钟前
4
0
数据库表与表之间的一对一、一对多、多对多关系

表1 foreign key 表2 多对一:表 1 的多条记录对应表 2 的一条记录 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以对应表2的一条记录 表2的多条记...

Garphy
今天
7
0
MySQL 表崩溃修复

MySQL日志报错 2019-10-19 13:41:51 19916 [ERROR] /usr/local/mysql/bin/mysqld: Table './initread_hss/user_info' is marked as crashed and should be repaired2019-10-19 13:41:51 1......

雁南飞丶
今天
6
0
Error和Exception

1.Error类和Exception类都是继承Throwable类 2.Error(错误)是系统中的错误,程序员是不能改变的和处理的,是在程序编译时出现的错误,只能通过修改程序才能修正。一般是指与虚拟机相关的问...

大瑞清_liurq
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部