网页布局中页面内容不足一屏时页脚footer固定底部

最新推荐文章于 2024-03-23 14:47:05 发布

skyePan

最新推荐文章于 2024-03-23 14:47:05 发布

阅读量2.7k

点赞数

分类专栏： HTML+CSS+JS 文章标签：前端页面布局

本文链接：https://blog.csdn.net/panchaofeng/article/details/53130463

版权

HTML+CSS+JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现样式：
-页面内容不足一屏时页脚固定在底部；
-页面内容超过一屏时，滚动内容到底部时出现页脚；

下面介绍两种方案，第一种方案依赖于浏览器对box-sizing的支持，所以对于低版本IE会有兼容问题，第二种方案对现代浏览器的兼容性无忧。
废话不用多说，直接贴代码啦~

1方案：

代码块语法遵循标准markdown代码，例如：

<!DOCTYPE html>
<html>
<head>
    <title>footer Fix</title>
    <meta charset="utf-8">
    <style>
        *{ 
            margin: 0; 
            padding: 0;
            box-sizing: border-box; 
        }
        html,body {
            height: 100%;
        }
        .header {
            height: 60px; 
            margin-bottom:-60px;
            background: maroon;
            position: relative;
        }
        .content {
            background: #CCC;
            min-height: 100%;
            padding: 60px 0;
        }
        .footer {
            height: 60px;
            margin-top:-60px;
            background: maroon;
        }
    </style>

</head>
<body>
    <div class="header">head</div>
    <div class="content">
        1content</br>content</br>2
    </div>
    <div class="footer">footer</div>
</body>
</html>

2方案

<!DOCTYPE html>
<html>
<head>
    <title>footer Fix</title>
    <meta charset="utf-8">
    <style>
        *{ 
            margin: 0; 
            padding: 0;
        }
        html,body, .wrap{
            height: 100%;
        }
        .head-head {
            height: 60px; 
            background:blue;
        }
        .wrap {
            height:auto;
            min-height: 100%;
        }
        /*.main {padding-bottom: 150px;}*/
        .header {
            height: 60px; 
            background: maroon;
        }
        .content {
            background: #CCC;
        }
        .footer {
            position:relative; 
            clear:both; 
            height: 60px;
            margin-top:-60px;
            background: maroon;
        }
        .clearfix:after {
            content:''; 
            display: block; 
            height: 60px;
            clear: both; 
            visibility: hidden;
        }
        /*.clearfix {display: inline-block;}*/
        /*.clearfix {display: block;}*/

    </style>

</head>
<body>
    <div class="head-head">head-head</div>
    <div class="wrap">
        <div class="mian clearfix">
            <div class="header">head</div>
            <div class="content">   
                1</br>content</br>2
            </div>
        </div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

这里贴出了两种简单的方案，当然还有其他实现方法，待以后慢慢研究。

skyePan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页布局中页面内容不足一屏时页脚footer固定底部

网页布局中页面内容不足一屏时页脚footer固定底部实现样式： -页面内容不足一屏时页脚固定在底部； -页面内容超过一屏时，滚动内容到底部时出现页脚；下面介绍两种方案，第一种方案依赖于浏览器对box-sizing的支持，所以对于低版本IE会有兼容问题，第二种方案对现代浏览器的兼容性无忧。废话不用多说，直接贴代码啦~1方案：代码块语法遵循标准markdown代码，例如：<!DOCTYPE ht
复制链接

扫一扫