Question

无论我做什么，我仍然无法将静态导航栏固定在页面底部。以下代码已在移动视图中执行此操作。然而，就是这样。正常查看页面时，页脚位于页面中间附近。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Hi</title>
    <meta charset="utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <link href = "css/bootstrap.min.css" rel = "stylesheet">
    <link href = "css/styles.css" rel = "stylesheet">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>

    <div class = "navbar navbar-inverse navbar-fixed-top">
        <div class = "container">

            <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
            </button>

            <div class = "collapse navbar-collapse navHeaderCollapse">

                <ul class = "nav navbar-nav navbar-right">
                    <li><a href = "#" >1</a></li>
                    <li><a href = "#" >2</a></li>
                    <li><a href = "#" >3</a></li>                                                   
                </ul>   
            </div>  
        </div>
    </div>

    <div class = "container">

        <div class = "jumbotron text-center">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum</p>
            <a class ="btn btn-default">Lorem ipsum</a>
            <a class = "btn btn-info">Lorem ipsum</a>
        </div>

    </div>

    <div class = "container">
        <div class = "row">

            <div class = "col-md-3">

                <h3><a href = "#">Lorem ipsum</a></h3>
                <p>Lorem ipsum</p>
                <a href = "#" class = "btn btn-default">Lorem ipsum</a>

            </div>

            <div class = "col-md-3">

                <h3><a href = "#">Lorem ipsum</a></h3>
                <p>Lorem ipsum</p>
                <a href = "#" class = "btn btn-default">Lorem ipsum</a>

            </div>

            <div class = "col-md-3">

                <h3><a href = "#">Lorem ipsum</a></h3>
                <p>Lorem ipsum</p>
                <a href = "#" class = "btn btn-default">Lorem ipsum</a>

            </div>

            <div class = "col-md-3">

                <h3><a href = "#">Lorem ipsum</a></h3>
                <p>Lorem ipsum</p>
                <a href = "#" class = "btn btn-default">Lorem ipsum</a>

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


    <div class = "navbar navbar-default navbar-static-bottom">
        <div class = "container">
            <p class = "navbar-text pull-daft">FOOTIE</p>
        </div>  
    </div>

    <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src = "js/bootstrap.js"></script>

</body>

CSS：

.body {
margin-bottom:80px;
}
body { 
padding-top: 76px; 

}
@media screen and (max-width: 768px) {
body { 
padding-top: 71px; 

}
}

.navbar-default { 
background-color: #bdffae;
border-color: #bdffae;
height: 28px;
}


.navbar-static-bottom { 
border-radius: 0;
z-index: 1000;
border-width: 0 0 1px;
padding-right: 0;
padding-left: 0;
margin: 20px 0 0; /* NOTE */
}

从20px增加边距会导致页脚向下移动，但是，在95px左右之后，它会超出＆＃34;在超过95px的情况下，会出现一个滚动条。更不用说，在95px时，页脚和页面底部之间仍然存在微小的间隙，这令人恼火。在增加页边距时还值得注意的是，如果内容被添加或从页面中删除，一切都搞砸了，所以如果有的话，我需要一个长期的解决方案，它会永久地将页脚粘贴到页面上页面底部没有在浏览器中修复它。

有人请帮忙。提前谢谢。

Answer 1

用自定义包装器包装你的页面（Yikes !! To Bootstrap？！？是的，不用担心，它可以工作，一切都保持响应），设置body和html到100％高度（什么!!相信我），在页脚中添加一个自定义类，然后将一些内部内容反弹一下。

以下是您的一些html示例：http://www.bootply.com/iphqanCGV9

以下是它的要点：

CSS：

html,
body {
   height:100%;
}
.custom-wrapper {
   min-height:100%;
   position:relative;
}

.pad-container{ 
   padding-top:80px; /* HEIGHT OF THE HEADER + BREATHING ROOM */
   padding-bottom:80px; /* HEIGHT OF THE FOOTER + BREATHING ROOM */
   }

.static-footer {
   position:absolute;
   bottom:0;
   left:0;
   width:100%;
   height:60px;
   background:#ccc;
}

HTML：

<div class="custom-wrapper"> <!-- CUSTOM WRAPPER -->
      <div class = "navbar navbar-inverse navbar-fixed-top">

...

<div class="container pad-container"><!-- ROOM TO BREATHE -->

    <div class = "jumbotron text-center">
        <h1>Lorem ipsum</h1>
        <p>Lorem ipsum</p>

...

    <div class="footer static-footer"> <!-- HI THERE -->
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </div>
</div><!-- END CUSTOM WRAPPER -->

改编自：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

无法将静态页脚刷到页面底部

1 个答案: