文档章节

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>

 

© 著作权归作者所有

共有 人打赏支持
沉默的懒猫
粉丝 7
博文 96
码字总数 36024
作品 0
海淀
程序员
DIV+CSS规范命名大全集合

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

0000001
2014/08/12
0
0
footer页脚置底(5种)

原文链接 页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置...

追风_
01/02
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

没有更多内容

加载失败,请刷新页面

加载更多

活动招募 HUAWEI HiAI公开课·北京站-如何在4小时把你的APP变身AI应用

人工智能和机器学习是全球关注的新趋势,也是当前最火爆、最流行的话题。当你拿手机用语音助手帮你点外卖,智能推荐帮你把周边美食一网打尽;当你拿起P20拍照时,它将自动识别场景进行最美优...

华为终端开放实验室
19分钟前
1
0
匹配两位小数,js正则

var regex = /^\d*(\.[1-9]|\.\d[1-9])*$/ console.log(1.2,regex.test(1.2)); console.log(0.3,regex.test(0.3)); console.log(1.03,regex.test(1.03)); ......

微信小程序-暗潮
24分钟前
1
0
905. Sort Array By Parity - LeetCode

Question 905. Sort Array By Parity Solution 题目大意:数组排序,偶数放前,奇数在后,偶数的数之间不用管顺序,奇数的数之间也不用管顺序 思路:建两个list,一个放偶数,一个放奇数,最...

yysue
29分钟前
1
0
h5 禁止手机自带键盘弹出

html: <div style="width: 350px;margin:50px auto;"><input type="text" id="datePicker" class="date_picker form-control" placeholder="点击选择入住日期" /></div> js: $("#date......

Delete90
45分钟前
1
0
color透明度对照表

透明度百分比 数值 100% 不透明 FF 95% F2 90% E6 85% D9 80% CC 75% BF 70% B3 65% A6 60% 99 55% 8C 50% 80 45% 73 40% 66 35% 59 30% 4D 25% 40 20% 33 15% 26 10% 1A 5% 0D 0% 完全透明 ......

_无问西东
47分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部