zoukankan      html  css  js  c++  java
  • html 设置页脚div一直在页面底部

    先上代码

    <!DOCTYPE HTML>
    <html lang="en" style="height: 100%;  100%;">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=Edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body class="page-header-fixed page-sidebar-closed-hide-logo page-sidebar-closed-hide-logo"  style="position: absolute;  100%; min-height: 100%; height: auto;">
            <div class="page-header navbar navbar-fixed-top">
                //这部分的div的 position 是 fixed </div>
            <div style="position: absolute; min-height: 100%; height: auto;  100%; text-align: center;">
                <div class="page-container" style="position: relative; margin-bottom: 30px;"></div>
                 <div class="page-footer" style="position: absolute; bottom: 0px; display: block;  100%;"></div>
            </div>
        </body>
    </html>

    解析:

    1、先设置<html>的 height 为 100%;

    2、设置 body 的position 为 absolute,因为它里面的 div 有一个为 fixed,这样可以使得 body 的范围可以包括该div,如果设置为 relatve,则不包括该div。再设置 min-height 为 100%,使其最小高度也为 html 的 height;

    3、让内容 div 和页脚 div 都包含在同一个外部 div 中,这样页脚在窗口缩小时不会上浮到内容 div 的位置。

    4、外部 div 的 position 设置为 absolute,是由于 body 也为 absolute 的缘故,并设置其 min-height 为 100%,这样可以使其高度最小为 body 的高度,height 为 auto,则使其可以任意改变。

    5、页脚 div 的 position 设置为 absolute,bottom 为 0,是为了绝对定位,让其居于页面底部。

  • 相关阅读:
    find命令
    shell编程基础
    grep命令
    awk命令
    结对项目之需求分析与原型模型设计
    使用Git进行代码管理的心得
    软件工程的实践项目的自我目标
    第五次作业——团队项目——需求规格说明书
    调研android开发环境的发展演变
    结对编程总结
  • 原文地址:https://www.cnblogs.com/linguoguo/p/4680105.html
Copyright © 2011-2022 走看看