pc端footer固定在底部

最新推荐文章于 2021-11-21 11:52:45 发布

月落星河°

最新推荐文章于 2021-11-21 11:52:45 发布

阅读量690

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/wangzongyang1025_/article/details/98756653

版权

CSS 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

问题：在pc端中我们的底部导航如果内容不够或者换了屏幕就会出现底部导航乱掉，我去调研了一些官网，发现有的他们的导航是没有固定在底部的，而是随着内容的减少，导航会自动的提升到页面的顶部，而有的导航是固定在底部的，无论你的内容有多少，它都是在你的底部，接下来我就直接上代码

<!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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body,
    html {
        height: 100%;
    }

    .main {
        min-height: 100%;
        position: relative;
    }

    .warp {
        width: 1260px;
        height: 100%;
        margin: 0 auto;
        padding-bottom: 300px;

    }

    .header {
        width: 100%;
        height: 200px;
        background-color: red;
    }

    .footer {
        width: 100%;
        height: 200px;
        background-color: #AAA;
        position: absolute;
        bottom: 0;
    }
</style>

<body>
    <div class="main">
        <div class="warp">
            <header class="header">
                我是内容区域
            </header>
            <header class="header">
                我是内容区域
            </header>
            <header class="header">
                我是内容区域
            </header>
            <header class="header">
                我是内容区域
            </header>
            <header class="header">
                我是内容区域
            </header>
            <header class="header">
                最后一个
            </header>
            <header class="header">
                我是内容区域
            </header>
            <header class="header">
                最后er个
            </header>
        </div>
        <footer>
            <div class="footer">
                <h1>footer</h1>
            </div>

        </footer>
    </div>
</body>

</html>

也没有什么东西，注意的是你的内容需要版心的话，要在加个div，你的body,html的高度要设置为100%

第二种方法是通过底部的margin-top

<!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>
</head>
 <style>
     body,html {
         height: 100%;
        margin: 0;
        padding: 0;
     }
     .container {
        min-height: 100%;  // 最小的宽度为100%
     }
     .header {
        background-color: red
     }
     .main {
         background-color: blue;
         padding-bottom: 100px;
     }
     .footer {
        background-color: yellow;
        height: 100px;
        margin-top: -100px;
     }
 </style>
<body>
        <div class="container">
                <div class="header">header</div>
                <div class="main"><div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>

                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>

                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>

                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>

                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
                <div>222</div>
            </div>
         
            </div>
            <div class="footer">footer</div> 
</body>
</html>

这是上述的两种将导航固定在底部
我的问题 : 我见过很多的网站都不是固定在底部的，它随着内容的减少，底部导航都会往上走，而底部不会有空隙，这种应该怎么搞，是跟布局有关系吗？

月落星河°

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
pc端footer固定在底部

问题：在pc端中我们的底部导航如果内容不够或者换了屏幕就会出现底部导航乱掉，我去调研了一些官网，发现有的他们的导航是没有固定在底部的，而是随着内容的减少，导航会自动的提升到页面的顶部，而有的导航是固定在底部的，无论你的内容有多少，它都是在你的底部，接下来我就直接上代码<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫