Question

我对编程/ Web开发还很陌生（本质上这是我的第一个网站），由于某种原因，我在index.php页面上的页脚顶部没有任何填充（其他页面上的页脚都很完美）很好）。

Index.php

<?php 
include('includes/header.php');
?>

<div class="main-body">
    <div id="box-1">
        <h2>WELCOME TO</h2>
    </div>
    <div id="box-2">
        <h2>TOTALLY<br> EDUCATIONAL</h2>
    </div>
</div>

<?php 
    include('includes/footer.php') 
?>

footer.php

<footer>
    <h5>© 2019 Totally Educational. All Rights Reserved.</h5>
</footer>

</body>
</html>

style.css（index）

/*INDEX PAGE*/

/*side-by-side box structure*/

.main-body {
    box-sizing: border-box;
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 10px;
    text-align: center;
}

#box-1 {
    width: 49.5%;
    background-color: rgba(126,121,121,1.00);
    float: left;
    height: 600px;
    border-right: solid;
    border-right-width: 2px;
}

#box-2 {
    width: 50%;
    background-color: white;
    float: left;
    height: 600px;
}

/*side-by-side box styling*/

#box-1 h2 {
    padding: 300px 0;
    letter-spacing: 5px;
    color: white;
}

#box-2 h2 {
    padding: 300px 10%;
    letter-spacing: 5px;
}

style.css（页脚）

#footer, #footer h5 {
    background-color: black;
    color: white;
    padding: 20px 0;
    margin: 0;
    text-align: center;
    width: 100%;
}

以上是与该问题有关的所有PHP和CSS。基本上，当我运行它时，索引页脚h4的顶部没有填充，并且在其下面有白色条带。对于其他所有页面，仅在index.php中不会发生此问题。我在三天左右的时间里写下了所有这些，而我才刚刚开始学习所有东西，所以这可能是我所做的一些愚蠢的新事物，但是任何帮助将不胜感激。我还要附上一些图片。

index.php screenshot
games.php screenshot

-jEK01

Answer 1

尝试将inline-block用于.main-body，并将clear:both;添加到#footer：

.main-body {
    box-sizing: border-box;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 10px;
    text-align: center;
}
#footer, #footer h5 {
  background-color: black;
  clear:both;
  color: white;
  padding: 20px 0;
  margin: 0;
  text-align: center;
  width: 100%;
}

索引页脚怪异

1 个答案: