文档章节

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重定向传参
沉默的懒猫
粉丝 8
博文 97
码字总数 36067
作品 0
海淀
程序员
私信 提问
CSS实现footer“吸底”效果

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

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

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

0000001
2014/08/12
0
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
12
0
如何给网页css样式起个好名字?

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

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

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

小运
2013/08/26
0
16

没有更多内容

加载失败,请刷新页面

加载更多

deepin中配置robot framework环境

本文永久更新地址:https://my.oschina.net/bysu/blog/2989005 【若要到岸,请摇船:开源中国 不最醉不龟归】 1.在终端中输入pip,回车,如果提示没有该命令,则先安转pip sudo apt-get inst...

不最醉不龟归
41分钟前
3
0
OSChina 周日乱弹 —— 钱不还,我就当你人不在了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享Bigleaf的单曲《小鹿》 《小鹿》- Bigleaf 手机党少年们想听歌,请使劲儿戳(这里) 周日在家做什么? 做手工呀, @poorfis...

小小编辑
今天
125
4
EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
21
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
30
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
40
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部