我已经尽我所能使黑色部分的高度根据上图中的“样本”发生变化。每当我添加将下降的新“样本”时，黑色部分就不会跟随。我的代码有什么问题吗？如果有，请让我了解如何修复它，因为我是新手。
这是我的代码:
body,
html,
.yourteachers,
.fullpage
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.fullpage
{
background-color: black;
}
.leftForm
{
background-color: #2c384a;
width: 204px;
height: 100%;
float: left;
font-family: calibri;
color: white;
text-align: center;
}
.yourteachers
{
text-align: center;
}
.announcementSlider
{
background-color: #323f4f;
color: white;
font-size: 24px;
height: 280px;
width: 200px;
margin: 20px;
display: inline-block;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="css/teachers.css">
</head>
<body>
<header>
<nav>
<div class="nav-wrapper blue">
<div class="container">
<a href="#" class="brand-logo left">Teachers</a>
<a href="#" class="sidenav-trigger" data-target="slide_out"><i class="material-icons">menu</i></a>
<ul class="hide-on-med-and-down right">
<li><a id="dashb">Home</a></li>
<li><a id="logout">Log Out</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="fullpage">
<div class="leftForm hide-on-med-and-down">
<img src="pictures/default-avatar-250x250.png">
<p class="name">
<?php echo $name; ?>
</p>
<p class="section">
<?php echo $grade; ?>-
<?php echo $section; ?>
</p>
</div>
<div class="leftForm sidenav blue center" id="slide_out">
<img src="pictures/default-avatar-250x250.png">
<p class="name">
<?php echo $name; ?>
</p>
<p class="section">
<?php echo $grade; ?>-
<?php echo $section; ?>
</p>
</div>
<div class="yourteachers">
<?php
while ($row = mysqli_fetch_array($query)) {
echo '<a class="announcementSlider" href="teacherinfo.php?id=' . $row['IDNum'] . '">
<img src="pictures/blank photo.png" class="teacherpic"><br>
<span>'.$row['LastName'].'</span><br>
<span>'.$row['Grade'].' - </span>
<span>'.$row['Section'].'</span>
</a>';
}
?>
</div>
</div>
<script type="text/javascript">
var a = document.getElementsByClassName("announcementSlider");
for (i = 0; i < a.length; i++) {
a[i].onclick = function() {
location.href = "teacherinfo.php";
};
}
</script>
<script src="js/teachers.js"></script>
<script src="sameFunctions.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
<footer>
<div class="foot">
<div class="socialMed">
<a href="https://www.facebook.com/SchoolOfFelixians/" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
</div>
</div>
</footer>
</body>
</html>最佳答案
这是因为您的.fullpage 需要跟随.yourteachers 的高度。您的 .leftForm 有 float: left 但它的父级 (.fullpage) 仍然不知道它的子级的确切高度。要修复它，您需要添加 clear: both 通过将 div 与附加的 .clearboth 类或 css :before 或 :after 伪选择器一起使用。
在我上面的方法中，我使用固定侧边栏并在 .yourteachers 上添加 margin-left 来修复侧边栏高度问题。为了更好地实现，我建议您使用 flex box，这样您就可以保持侧边栏不使用固定位置。
关于php - html 和 body 的高度不是 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54383253/