CSS实现页脚始终在页面底部

说明  

    最近在布局自己的博客系统,我是想练练手把时下比较流行的前后端技术串起来。同时,我会把设计和编码过程中遇到的问题或值得分享的技术点、实现方式做下总结,记录下来。本篇就是第一篇,个人能力有限,不足之处欢迎指正。大家一起交流,共同进步是我写博客的初衷。

    我们知道要想让页脚DIV始终固定在底部有几种实现方式。

1.是靠绝对定位position:absoute实现div固定在屏幕下方。

2.靠margin-top:-xx像素;实现div始终固定在页面下方。

我觉着第2种更适合我。第1种在你页面滚动时屏幕下方始终有个固定区域视觉上感觉不太好。

下面就看下第2种的实现效果:

 

实现效果

 

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style type="text/css">
        body {
            width: 50%;
            height: 100%;
            font-size: 24px;
            text-align: center;
            margin: 0 auto;
        }


        .container {
            height: 100%;
            padding-bottom: 100px;
        }

        .header {
            height: 100px;
            background-color: goldenrod;
        }

        .content {
            background-color: green;
        }

        .content p{
            margin: 10px 0;
        }

        .footer {
            height: 100px;
            margin-top: -100px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            页头
        </div>
        <div class="content">
            <p>
                第一章 一般规定
                第一条 立法目的
                为了保护合同当事人的合法权益,维护社会经济秩序,促进社会主义现代化建设,制定本法。
                第二条 合同定义
                本法所称合同是平等主体的自然人、法人、其他组织之间设立、变更、终止民事权利义务关系的协议。 婚姻、收养、监护等有关身份关系的协议,适用其他法律的规定。
                第三条 平等原则
                合同当事人的法律地位平等,一方不得将自己的意志强加给另一方。
                第四条 合同自由原则
                当事人依法享有自愿订立合同的权利,任何单位和个人不得非法干预。
                第五条 公平原则
                当事人应当遵循公平原则确定各方的权利和义务。
                第六条 诚实信用原则
                当事人行使权利、履行义务应当遵循诚实信用原则。
                第七条 遵纪守法原则
                当事人订立、履行合同,应当遵守法律、行政法规,尊重社会公德,不得扰乱社会经济秩序,损害社会公共利益。
                第八条 依合同履行义务原则
                依法成立的合同,对当事人具有法律约束力。当事人应当按照约定履行自己的义务,不得擅自变更或者解除合同。 依法成立的合同,受法律保护。
                第二章 合同的订立
                第九条 订立合同的能力
                当事人订立合同,应当具有相应的民事权利能力和民事行为能力。 当事人依法可以委托代理人订立合同。
                第十条 合同的形式
                当事人订立合同,有书面形式、口头形式和其他形式。 法律、行政法规规定采用书面形式的,应当采用书面形式。当事人约定采用书面形式的,应当采用书面形式。
                第十一条 书面形式
                书面形式是指合同书、信件和数据电文(包括电报、电传、传真、电子数据交换和电子邮件)等可以有形地表现所载内容的形式。
                第十二条 合同内容
                合同的内容由当事人约定,一般包括以下条款: (一)当事人的名称或者姓名和住所; (二)标的; (三)数量; (四)质量; (五)价款或者报酬; (六)履行期限、地点和方式; (七)违约责任;
                (八)解决争议的方法。
                当事人可以参照各类合同的示范文本订立合同。
                第十三条 订立合同方式
                当事人订立合同,采取要约、承诺方式。
                第十四条 要约
                要约是希望和他人订立合同的意思表示,该意思表示应当符合下列规定: (一)内容具体确定; (二)表明经受要约人承诺,要约人即受该意思表示约束。
            </p>
        </div>
    </div>

    <div class="footer">
        页脚
    </div>
</body>

</html>

 

 

 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 HTML 页面中,将页脚固定在页面底部可以使用多种方法实现。下面介绍其中的几种方法。 ### 方法一:使用 CSS 使用 CSS 的 `position: fixed` 属性可以将元素固定在页面的某个位置。将页脚元素使用 `position: fixed` 属性,设置 `bottom: 0`,即可将页脚固定在页面底部。 ``` <style> footer { position: fixed; bottom: 0; width: 100%; background-color: #333; color: #fff; text-align: center; padding: 10px; } </style> <body> <main> <!--页面内容--> </main> <footer> <!--页脚内容--> </footer> </body> ``` ### 方法二:使用 Flexbox 使用 Flexbox 布局可以方便地将元素固定在页面底部。将页面内容和页脚包裹在一个容器中,使用 `display: flex` 和 `flex-direction: column` 属性将容器变成纵向排列,然后将容器的高度设置为 `100vh`,将页脚元素的 `margin-top` 设置为 `auto`,即可将页脚固定在页面底部。 ``` <style> html, body { height: 100%; } .container { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } footer { margin-top: auto; width: 100%; background-color: #333; color: #fff; text-align: center; padding: 10px; } </style> <body> <div class="container"> <main> <!--页面内容--> </main> <footer> <!--页脚内容--> </footer> </div> </body> ``` ### 方法三:使用 Grid 使用 Grid 布局也可以将元素固定在页面底部。将页面内容和页脚包裹在一个容器中,使用 `display: grid` 和 `grid-template-rows: 1fr auto` 属性将容器分成两行,第一行占据剩余的空间,第二行为自适应高度,即可将页脚固定在页面底部。 ``` <style> html, body { height: 100%; } .container { display: grid; grid-template-rows: 1fr auto; min-height: 100vh; } main { /*不需要设置高度*/ } footer { width: 100%; background-color: #333; color: #fff; text-align: center; padding: 10px; } </style> <body> <div class="container"> <main> <!--页面内容--> </main> <footer> <!--页脚内容--> </footer> </div> </body> ``` 以上是三种将页脚固定在页面底部的方法,可以根据实际情况选择使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值