HTML+CSS底部footer两种固定方式

网页常见的底部栏（footer）目前有两种：

一、永久固定，不管页面的内容有多高，footer一直位于浏览器最底部，适合做移动端底部菜单，这个比较好实现;(向立凯)

二、相对固定，当页面内容高度不沾满浏览器高度，footer显示在浏览器底部，且不会出现滚动条，如果页面内容高度超出浏览器高度，footer则相对与内容的最底部，并且自动出现滚动条；(向立凯)

废话不多说，可以直接复制代码查看效果

一、永久固定

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title></title>
   <meta charset="utf-8" />
   <style>
       body {
           padding-bottom: 50px;
       }

       .footer {
           position: fixed;
           left: 0px;
           bottom: 0px;
           width: 100%;
           height: 50px;
           background-color: #eee;
           z-index: 9999;
       }
   </style>
</head>
<body>
   内容，可以大量复制看效果<br />

   <div class="footer">固定在底部</div>
</body>
</html>

二、相对固定

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
 
        html, body {
            height: 100%;
        }
 
        .footer {
            margin-top: -50px;
            height: 50px;
            background-color: #eee;
            z-index: 9999;
        }
 
        .wrap {
            min-height: 100%;
        }
 
        .main {
            padding-bottom: 50px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="main">
            内容，可以大量复制看效果<br />
 
        </div>
    </div>
    <div class="footer">相对在底部</div>
</body>
</html>

css实现按钮固定在底部

想要把按钮固定在底部，让浏览器滚动时也不受影响。其实代码很简单的啦！
css如下:

<style>
.r{position:fixed; bottom:0;width:360px;left:0px;}
</style>

html如下:

<div>
    <div class="r">
        <input type="submit" value="确认添加"  class="btn btn-primary"/>
    </div>
</div>```

HTML+CSS底部footer两种固定方式

推荐阅读更多精彩内容