html - CSS 页脚有巨大的顶部边距，需要删除

Question

我正在使用一个模板(基本上相同的页面使用相同的模板重复)，但是，在我的三个页面上有一个巨大的 margin-top 元素，我不知道如何删除它。

我试过添加 style="margin-top:30px"和我试过添加 style="margin-top:30px; !important"看看我是否能克服它，但无济于事.

查看 Chrome 中的检查器工具，我可以看到 margin-top 有一个 698px 值，我只是不知道如何制作它，所以它绝对不是那个大小......最多 30。

<footer id="footer" class="dark" style="margin-top: 698px;">

页脚的 html 是

<footer id="footer" class="dark">
<div class="container">


<div id="copyrights">
<div class="container clearfix">
<div class="col_half">
Copyrights &copy; 2013-2019<br>Daniël E. Cronk<br>

</div>
<div class="col_half col_last tright">
<div class="fright clearfix">
<a href="#" class="social-icon si-small si-borderless si-facebook">
<i class="icon-facebook"></i>
<i class="icon-facebook"></i>
</a>
<a href="https://www.twitter.com/dereizigercronk" class="social-icon si-small si-borderless si-twitter">
<i class="icon-twitter"></i>
<i class="icon-twitter"></i>
</a>
<a href="https://www.instagram.com/a333msptoams" target="_blank" class="social-icon si-small si-borderless si-instagram">
<i class="icon-instagram"></i>
<i class="icon-instagram"></i>
</a>
</div>
<div class="clear"></div>

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

据我所知，CSS 的层次结构显示页脚具有以下 CSS 元素:

bootstrap.css

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

样式.css

#footer {
position: relative;
background-color: #EEE;
border-top: 5px solid rgba(0,0,0,0.2);
bottom: 0;
}

.device-xl.sticky-footer #top-bar,
.device-lg.sticky-footer #top-bar { z-index: 299; }

.device-xl.sticky-footer #header,
.device-lg.sticky-footer #header { z-index: 199; }

.device-xl.sticky-footer #slider:not(.slider-parallax-invisible),
.device-xl.sticky-footer #page-submenu,
.device-xl.sticky-footer #page-title,
.device-xl.sticky-footer #content,
.device-lg.sticky-footer #slider:not(.slider-parallax-invisible),
.device-lg.sticky-footer #page-submenu,
.device-lg.sticky-footer #page-title,
.device-lg.sticky-footer #content { z-index: 2; }

.device-xl.sticky-footer #footer,
.device-lg.sticky-footer #footer {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.device-xl.sticky-footer:not(.stretched) #footer,
.device-lg.sticky-footer:not(.stretched) #footer {
    left: 50%;
    margin-left: -610px;
    width: 1220px;
}

.device-lg.sticky-footer:not(.stretched) #footer {
    margin-left: -500px;
    width: 1000px;
}

#footer .footer-widgets-wrap {
    position: relative;
    padding: 80px 0;
}

.footer-widgets-wrap .col_full,
.footer-widgets-wrap .col_half,
.footer-widgets-wrap .col_one_third,
.footer-widgets-wrap .col_two_third,
.footer-widgets-wrap .col_three_fourth,
.footer-widgets-wrap .col_one_fourth,
.footer-widgets-wrap .col_one_fifth,
.footer-widgets-wrap .col_two_fifth,
.footer-widgets-wrap .col_three_fifth,
.footer-widgets-wrap .col_four_fifth,
.footer-widgets-wrap .col_one_sixth,
.footer-widgets-wrap .col_five_sixth { margin-bottom: 0; }

#copyrights {
    padding: 40px 0;
    background-color: #DDD;
    font-size: 14px;
    line-height: 1.8;
}

#copyrights i.footer-icon {
    position: relative;
    top: 1px;
    font-size: 14px;
    width: 14px;
    text-align: center;
    margin-right: 3px;
}

.copyright-links a {
    display: inline-block;
    margin: 0 3px;
    color: #333;
    border-bottom: 1px dotted #444;
}

.copyright-links a:hover {
    color: #555;
    border-bottom: 1px solid #666;
}

.copyrights-menu { margin-bottom: 10px; }

.copyrights-menu a {
    font-size: 14px;
    margin: 0 10px;
    border-bottom: 0 !important;
}

#copyrights .col_half { margin-bottom: 0 !important; }

#copyrights a:first-child { margin-left: 0; }

#copyrights .tright a:last-child { margin-right: 0; }

.footer-logo {
    display: block;
    margin-bottom: 30px;
}

深色.css

#footer.dark,
.dark #footer {
    background-color: #333;
    color: #CCC;
    border-top-color: rgba(0,0,0,0.2);
    margin-top: 30px;
    display: inline-block;
    position: fixed;
bottom: 0;
}

Answer 1

它不完全是您添加 css 使页脚 固定 在底部的 边距，所以它显示的边距高于(屏幕高度)。

#footer.dark,
.dark #footer {
    background-color: #333;
    color: #CCC;
    border-top-color: rgba(0,0,0,0.2);
    margin-top: 30px;
    display: inline-block;
    position: fixed;
    bottom: 0;
}