Question

我目前正在为我的网站工作一个页脚，每当我在页脚类中放置一些东西时，似乎在我不确定如何摆脱的所有内容下面都有一些空间。我希望页脚能够“剪切”或以其内部元素结束。

您可以在我的网站上查看我所指的实时here 我所指的额外空间是here。

footer.php

    <div class="footer">
        <div class="footer_elements">
            <div class="useful_resources">
                <h1>Useful Resources</h1>
                    <p><a href="index.php">home</a></p>
                    <p><a href="#">graphics</a></p>
                    <p><a href="#">web</a></p>
                    <p><a href="#">contact</a></p>
            </div>
            <?php include 'includes/modules/connect.php' ?>
            <?php include 'includes/modules/newsletter.php' ?>

        </div>
    </div>

    </body>

Styles.css ：

.footer{width: 100%; max-width: 100%; height: 20px; margin-top: -50px; border-bottom: 30px solid #23262B;}
.footer_elements{font-family: 'Raleway', sans-serif;}
.footer_elements h1{font-size: 26px;}
.footer_elements p{font-size: 18px;}
.footer_elements p{margin-top: -10px;}
.useful_resources{padding: 35px; color: white; float: left;}
.useful_resources a{color: white; text-decoration: none;}
.useful_resources a:hover{color: #CC7A29;}

.connect{padding: 35px; color: white; overflow: hidden;}
.connect a{color: white; text-decoration: none;}
.connect img{width: 35px; float: left; margin-top: -2px;}
.connect_bg{background-color: #393C40; border: 0px solid white; border-radius: 7px; max-width: 225px;}
.connect_bg:hover{background-color: #7AA3CC;}
.connect_bg p{padding: 5px;}
.connect_bg2{background-color: #393C40; border: 0px solid white; border-radius: 7px; max-width: 225px;}
.connect_bg2:hover{background-color: #1F5C99;}
.connect_bg2 p{padding: 5px;}
.connect_bg3{background-color: #393C40; border: 0px solid white; border-radius: 7px; max-width: 225px;}
.connect_bg3:hover{background-color: red;}
.connect_bg3 p{padding: 5px;}
.connect_bg3 img{margin-top: -7px;}
.connect_bg4{background-color: #393C40; border: 0px solid white; border-radius: 7px; max-width: 225px;}
.connect_bg4:hover{background-color: #FF99CC;}
.connect_bg4 p{padding: 5px;}

.newsletter {margin-left: 25px; padding: 15px; width: 500px; border: 2px dashed white; border-radius: 30px; background-color: #393C40; font-family: 'Raleway', sans-serif; color: white; max-width: 600px; }
.newsletter:hover{background-color: #1F5C99;}
.newsletter p{font-size: 14px; margin-left: 25px; margin-top: -35px;}
.heading{margin-left: 125px;}

如果需要更多详细信息，我可以提供。提前感谢任何有可能解决页脚额外空间的人。

祝你好运， CODI

Answer 1

我不确定，但我认为你提到的额外空间是由你的div和＃34; square＆＃34;引起的。它的高度属性＆＃34; 100％＆＃34;，将原始页面的总高度添加到底部。

如何摆脱页脚上的额外空间？

1 个答案: