Footer的两种不同的位置

最新推荐文章于 2023-09-14 09:15:24 发布

原创最新推荐文章于 2023-09-14 09:15:24 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #div #header #server #html

Java基础同时被 2 个专栏收录

72 篇文章

订阅专栏

web前台

8 篇文章

订阅专栏

本文介绍了两种实现网页底部固定页脚的方法。一种是将页脚定位在内容区域下方，适用于内容高度可变的情况；另一种是将页脚直接置于页面底部，适合页面整体布局固定的场景。通过CSS样式设置，确保了页脚始终显示在合适的位置。

前言

看到了footer，又想起了当时做footer时查的资料，整理下。

正题

1、在文字的最下方：

新建一个页面：

<head runat="server">
    <title></title>
    <style type="text/css">
        body, html
        {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #content
        {
            min-height: 100%;
            position: relative;
        }
        #main
        {
            padding: 10px;
            padding-bottom: 60px; /* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
        }
        #footer
        {
            position: absolute;
            bottom: 0;
            padding: 10px 0;
            background-color: blue;
            width: 100%;
        }
        #footer h1
        {
            margin: 0;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <div id="content">
        <div id="main">
            <script language="javascript" type="text/javascript">
                for (i = 0; i < 1000; i++) {
                    document.write(i + "<br />");
                }
            </script>
        </div>
        <div id="footer">
            <h1>
                Footer</h1>
        </div>
    </div>
</body>

效果如图：

2、在页面的最下方：

新建一个页面：

<head>
    <title></title>
    <style type="text/css">
        body
        {
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            padding-top: 22px;
            padding-bottom: 22px;
        } 
        #header
        {
            background-color: blue;
            color: white;
            position: absolute;
            top: 0px;
            left: 0px;
            height: 16px;
            width: 100%;
        }
        #content
        {
            width: 100%;
            height: 100%;
            overflow:auto;
            position:absolute;
        }
        #footer
        {
            background-color: green;
            color: white;
            width: 100%;
            height: 16px;
            position: absolute;
            bottom: 0px; 
        }
    </style>
</head>
<body>
    <div id="header">
        header</div>
    <div id="content">
        <script language="javascript" type="text/javascript">
            for (i = 0; i < 1000; i++) {
                document.write(i + "<br />");
            }
        </script>
    </div>
    <div id="footer">
        footer</div>
</body>

效果如图：