html - 如何在可滚动的页面底部显示页脚？

问题描述

我需要帮助在需要滚动的页面底部显示我的页脚。使用的代码仅适用于不需要滚动的页面。当前页脚显示在页面中间。它应该显示在页面底部。我尝试过做网站告诉我做的事情。网站包括： https ://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ https://css-tricks.com/couple-takes-sticky-footer /#there-is-flexbox 但是这两个网站都不起作用....

干杯

贾斯汀

这是我的 CSS 代码。

html, body {
      height: 100%;
    }
    
    body {
        background-color: #EEE;
        font-family: Helvetica, Arial, sans-serif;
        background-image: url (logo.png);
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        display: flex;
        flex-direction: column;
    }
    
    h1, h2, h3 {
        margin: 0;
    }
    
    a {
        text-decoration: none;
        color: blue;
    }
    
    #container {
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        min-height: 100vh;
    }   
    
    #header {
        background-color: blue;
        color: white;
        text-align: center;
        padding: 10px;
    }
    
    #content {
        padding-top: 10px;
        padding-left: 10px;
        padding-right:10px;
        padding-bottom: 2.5rem;
        margin-right:0px;
        min-height: 100vh;
    }
    
    #nav ul {
        list-style-type: none;
    }
    
    #nav .selected {
        font-family: bold;
    }
    
    #nav {
        width: 18%;
        float: left;
    }
    
    #main {
        width: 60%;
        float: right;
    }
    
    .content {
      flex: 1 0 auto;
    }
    
    .footer {
      flex-shrink: 0;
      color:white;
      background-color:black;
    }

下面是我的 HTML 代码。

    <!DOCTYPE html>
    <?php
        $database = "seriousdiseases";
        $database = new mysqli('localhost', 'root', '', $database) or die ("Unable to connect to the 
    DB");
    ?>
    <html>
        <head>
            <title>Ribose-5-phosphate isomerase deficiency</title>
            <link rel="stylesheet" type="text/css" href="style.css"/>
        </head>
        <body>
            <div id="container">
                <div id="header">
                    <h1>Ribose-5-phosphate isomerase deficiency</h1>
                </div>
                <div class="content">
                    <div id="nav">
                        <h3>Navigation</h3>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="aboutUs.html">About Us</a></li>
                            <li><a href="video.html">Video</a></li>
                            <li><a href="seriousDiseases.html">Serious Diseases</a></li>
                        </ul>
                    </div>
                    <div id="main">
                        <table>
                            <tr>
                                <th>Disease</th>
                                <th>Symptoms</th>
                            </tr>
                            <?php
                                $result = mysqli_query($database, "select disease, symptom from 
    feature") or die ("Unable to connect to the DB");
                                while ($row = mysqli_fetch_array($result)){
                                    print("<tr><td>" . $row[0] . "</td><td>" . $row[1] . "</td> 
    </tr>");
                                }
                                $database->close();
                            ?>
                        </table>
                    </div>
                </div>
                <footer class="footer">
                    Copyright &copy; 2020 CLINIC SCOPE
                </footer>
            </div>
        </body>
    </html>

标签： htmlcss

html - 如何在可滚动的页面底部显示页脚？

问题描述

解决方案

推荐阅读