Question

我已经尽一切努力使黑色部分的高度根据上图中的“样本”进行更改。每当我添加新的“样本”时，黑色部分都不会出现。我的代码有什么问题，如果有，请让我们了解如何解决它，因为这是我的新问题。

这是我的代码：

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>

Answer 1

<!-- language-all: lang-css -->

body, html, .yourteachers, .fullpage {
    margin: 0;
    padding: 0;
}
body, html {
    width: 100%;
    height: 100%;
    background: black;
}
.fullpage {
    overflow: hidden
}
.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;
}

Answer 2

这是因为您的.fullpage需要遵循.yourteachers的高度。并且您的.leftForm有float: left，但它的父级（.fullpage）仍然不知道其子级的确切高度。要解决此问题，您需要添加clear：通过将div与其他.clearboth类或css：before或：after伪选择器一起使用。

see my fiddle here

在上述方法中，我使用固定的侧边栏，并在.yourteachers上添加了margin-left来修复侧边栏高度问题。为了更好地实现，我建议您使用弹性框，以使侧边栏不使用固定位置。

Answer 3

您是否尝试过height: 100vh？高度会自动调整，因此height: 100%表示父项的高度为100％。

html和正文的高度不是100％

3 个答案: