Question

我正在制作一个多页网站，我在每个页面上都包含一个导航栏和一个页脚，导航栏就位并且工作正常但我的页脚到处都是。在某些页面中，它确实应该在哪里，其他页面位于页面中间，但在我添加页面内容之前就是这样。

我尝试了一些我在网上找到的东西，但迄今为止没有任何工作。 HTML：

    <head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="css/navFooter.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div id="navbar"></div>
    <div class="col-md-12">
        <table class="table">
            <td style="border: none;"><p>Choose the type of comparison you'd like to make.</p></td>
            <td>
                <b>Quick Comparison</b><br>
                <a href="/a/comparisons?action=indicators&nid=100&nid=200&nid=300&nid=400&nid=500&nid=600&nid=700&nid=800&nid=900&nid=1000&nid=1100&nid=1200&nid=1300&nid=1400&nid=1500&nid=1600&nid=1700&nid=1800&nid=1900&nid=2000&nid=2100&nid=2200&nid=2300&nid=2400&nid=2500&nid=2600&nid=2700&nid=2800&nid=2900&nid=3000&nid=3100&nid=3200&nid=3300&nid=3400&nid=3400&nid=3500&nid=3600&nid=3700&nid=3800&nid=3900&nid=4000&nid=4100&nid=4200&nid=4300&nid=4400&nid=4500&nid=4600&nid=4600&nid=4700&nid=4800&nid=4900&nid=5000&nid=5100&nid=5200&nid=5300&nid=5400&nid=5500&nid=5600&nid=5700&nid=5800&nid=5900&nid=6000&nid=6100&nid=6200&nid=6300&nid=6400&nid=6500&nid=6600&nid=6700">Compare all counties</a><br>
                <b>Custom Comparison</b><br>
                <a href="/a/comparisons">Compare selected counties and/or jurisdictions only</a>
            </td>
        </table>
    </div>
    <div id="footer"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript">
         $(function(){
            $("#navbar").load("navbar.html"); 
        });
        $(function(){
            $("#footer").load("footer.html"); 
        });
    </script>
</body>

CSS：

   html, body {
    height: 100%;
    width: 100%;
}
body { 
    padding-top: 90px; 
    position: relative;
    overflow: scroll;
}
.footer {
    position: absolute;
    margin: 0;
    width: 100%;
    background-color: #19D8FF;
    padding: 25px;
    border-top: 4px solid #3399CC;
    min-height: 150px;
    max-height: 250px;
}

页脚HTML：

<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-3 pull-left">
                <img src="img/Wordmark.png" alt="Logo">
            </div>
            <div class="col-md-5">
                    <a href="links.html">Links</a> |
                    <a href="contact.html">Contact</a> |                    
                    <a href="apps/azindex.pl">A-Z Index</a> |
                    <a href="siteMap.html">Site Map</a> |
                    <a href="disclaimer.html">Disclaimer</a></li>
            </div>
            <div class="col-md-4">
                 <p class="muted pull-right">© 2017 All rights reserved</p>
            </div>
    </div>
    </div>
</footer>

Answer 1

此代码应该让您朝着正确的方向前进。我添加了底部：0并将位置更改为固定。我还删除了你没有的

标签。这将把它放在视图的绝对底部，并始终固定在底部。

＆＃13;

 html, body {
    height: 100%;
    width: 100%;
}
body { 
    padding-top: 90px; 
    position: relative;
    overflow: scroll;
}
.footer {
    position: fixed;
    bottom: 0;
    margin: 0;
    width: 100%;
    background-color: #19D8FF;
    padding: 25px;
    border-top: 4px solid #3399CC;
    min-height: 150px;
    max-height: 250px;
}

＆＃13;

粘性页脚不在正确的位置

1 个答案: