让页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    html,body {
        height: 100%;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    #container {
        min-height: 100%;
        position: relative;
    }
    .header {
        line-height: 80px;
        font-size: 60px;
        height: 80px;
        background-color: #eee;
    }
    .body {
        font-size: 40px;
        padding-bottom: 80px;
    }
    .footer{
        line-height: 80px;
        height: 80px;
        width: 100%;
        font-size: 60px;
        position: absolute;
        background-color: #eee;
        bottom: 0;
    }
    </style>
</head>
<body>
    <div id="container">
        <div class="header">header</div>
        <div class="body">
        body<br>body<br>body<br>body<br>body<br>
        </div>
        <div class="footer">footer</div>
    </div>
</body>
</html>
时间: 2024-10-17 01:36:05

让页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部的方法的相关文章

将HTML页面页脚固定在页面底部(多种方法实现)

当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个Web的前端工作者学习者,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见. 那么如何将Web页面的&q

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

该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见.那么如何将Web页面的“footer”部分永远固定在

如何将页脚固定在页面底部?

作 为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上 来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见.那么如何将Web页面的 “footer”部分永远固定在页面的底部呢?注意了这里所说的是页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部,换句话说,就是当内容只有一点点时,Web页面显示在浏览器底部,当内容高度超

使用Bootstrap 3开发响应式网站实践07,页脚

页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="row"> <div class="col-sm-2"> <h6>Copyright ©新浪体育</h6> </div> <div class="col-sm-4"> <h6>关于我们

Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)

<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Author" content="胡超"> <title>super胡</title> <style> * { margin:0; padding:0; } html,body, #wrap { height: 100%;}

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

页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不是那么完美,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法,兼容IE5.0 ,Opera 8.5 ,Firefox 1.5 .下面我们看步骤: 1.为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 paddin

给SharePoint页面添加自定义页脚Custom footer

给SharePoint页面添加自定义页脚Custom footer 在公司做网站设计项目时,需要在页面上添加页脚. 很多人都把页脚忽视了,觉得没什么多大用处,其实它的作用还是有的,而且还越来越显得重要.页脚设计主要用来显示网站的版权和网站介绍.如果在页脚添加一些有趣的内容,可以提升用户体验,让网站变得更有趣味. 本文主要介绍如何在SharePoint页面上添加页脚,具体样式博友可以随意尝试,公司的站点主要还是以严肃为主,就不那么花哨了.简简单单做出来显示版权即可. 页脚当然是要放在每个页面下方(

给SharePoint页面加入自己定义页脚Custom footer

给SharePoint页面加入自己定义页脚Custom footer 在公司做站点设计项目时,须要在页面上加入页脚. 非常多人都把页脚忽视了,认为没什么多大用处,事实上它的作用还是有的,并且还越来越显得重要.页脚设计主要用来显示站点的版权和站点介绍.假设在页脚加入一些有趣的内容,能够提升用户体验,让站点变得更有趣味. 本文主要介绍怎样在SharePoint页面上加入页脚,详细样式博友能够任意尝试,公司的网站主要还是以严肃为主,就不那么花哨了.简简单单做出来显示版权就可以. 页脚当然是要放在每一个

如何将页脚固定在页面底部

方法一: HTML: <div id="container"> <div id="hearder">页头区域</div> <div id="page" class="clearfix">页面内容</div> <div id="footer">页脚</div> </div> CSS: html,body{ marg