无法更改页脚的背景颜色

Question

我正在 Github 页面上建立一个网站，我正在尝试更改页脚的颜色。 正如你所看到的，我用 class "footer" 制作。 在 CSS 上，我将 background-color 属性设置为 #000000。 但是，我仍然看不到桌面上的黑色背景颜色。（我可以在移动页面上看到，因为我设置了媒体查询）代码如下。

 @media screen and (min-width: 1000px) { html, body{ font-family: "Comfortaa"; } .header-logo{ float: left; padding: 10px 30px; } .header li:hover{ border-bottom: 2px solid #24ABE2; } .header a{ float:left; display:block; color:black; } .header-link li{ float: left; padding: 5px 60px; font-size: 20px; color:#24ABE2; } /* Dropdown Button */ .droplist{ border: none; } /* The container <div> - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: white; min-width: 240px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 20; margin-top: 29px; height: 210px; color:#24ABE2; } /* Links inside the dropdown */ .dropdown-content a { color: #24ABE2; padding: 12px 16px; text-decoration: none; display: block; z-index: 20; } /* Change color of dropdown links on hover */ .dropdown-content a:hover { border-bottom: 2px solid #24ABE2; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */ .dropdown:hover .dropbtn { background-color: white; } .footer-logo{ float: left; padding: 15px 20px; width: 300px; height: auto; margin-left: 30px; margin-top: 20px; } .footer-list{ margin-top:10px; font-size: 20px; color: #ccfbff; float: right; padding: 2px 8px; margin-right: 40px; } .footer-list li{ padding: 10px; } } @media screen and (max-width: 1000px) { html, body{ font-family: Nunito; } .header-logo{ text-align:center; margin-left:20px; padding: 10px 30px; } .header li{ display:none; } .header-link{ display:none; } .footer-logo{ padding: 15px 10px; width: 300px; height: 90px; margin:auto; text-align:center; } .footer-logo img{ width: 300px; height: auto; margin:auto; text-align:center; } .footer-list{ display:block; margin:auto; font-size: 20px; color: #ccfbff; padding: 2px 8px; text-align:center; } .footer-list li{ margin:auto; padding: 5px; font-size:20px; text-align:center; } } /* CSS for default design */ html { scroll-behavior: smooth; } html, body{ height: 100%; width: 100%; margin: 0px 0px 0px 0px; z-index:-10; } /* Settings of a tag for whole page*/ a:link { text-decoration: none; cursor: pointer; } a:visited { text-decoration: none; cursor: pointer; } a:hover { text-decoration: none; cursor: pointer; } a:active { text-decoration: none; cursor: pointer; } .header { border-bottom:2px solid #0E76BC; background-color: white; height: 60px; position: fixed; top: 0px; bottom: 0px; right: 0px; left: 0px; opacity: 90%; margin: 0px 0px 0px 0px; z-index:10; } .header-logo{ width: 300px; height: auto; } li{ list-style: none; } .footer{ height: auto; background-color: #000000 !important; width: 100%; margin: 0px 0px 0px 0px; } .footer a:link { color: #ccfbff; } .footer a:visited { color: #ccfbff; } .footer a:hover { color: #ccfbff; } .footer a:active { color: #ccfbff; }

 <div class="footer"> <img src="https://i.ibb.co/p4LvvdH/Copy-of-LOGO-White.png" alt="SLED Logo" class="footer-logo" /> <div class="footer-list"> <ul> <a href="#top"><li>Back to Top</li></a> <a href="https://instagram.com/jcbmssledteam/"><li>Instagram</li></a> <a href="https://www.facebook.com/jcbooth.sled"><li>Facebook</li></a> <a href="mailto: jcbms-sled-team@mail.fcboe.org"><li>Jcbms-sled-team@mail.fcboe.org</li></a> <a href="https://www.fcboe.org/jcbms"><li>JC Booth Middle School</li></a> <a href="https://www.fcboe.org"><li>Fayette County Public Schools</li></a> </ul> </div> </div>

Answer 1

每当我们在子项上赋予浮动属性时，父母就会自动将自己的高度设为 0，所以请把它：

    .footer:before,
    .footer:after
    {
        clear: both;
        display: block;
        content: '';
    }

Answer 2

原因是因为您将页脚height设置为 auto 而不定义最小高度。 要解决这个问题，只需输入min-height: 50vh; 到您的.footer类。 当然，您可以将 50vh 更改为您想要的任何最小高度。

Answer 3

尝试这样的事情

.footer
{
  min-height: 100%;
  background-color: #000000 !important;
  width: 100%;
  margin: 0px 0px 0px 0px;
}

从.footer类设置min-height: 100%而不是height:auto