enter image description here

J'ai essayé tout ce que je sais pour faire changer la hauteur de la partie noire en fonction des "échantillons" de l'image ci-dessus. Chaque fois que j'ajoute un nouvel "échantillon" qui descendra, la partie noire ne suivra pas. Y a-t-il quelque chose qui ne va pas dans mon code, s'il y en a, comprenons comment le réparer car je suis nouveau à ce sujet.

Voici mon code:

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>
0
PlusUltra 27 janv. 2019 à 01:07

3 réponses

Meilleure réponse

C'est parce que votre .fullpage doit suivre la taille de .yourteachers. Et votre .leftForm a float: left mais son parent (.fullpage) ne connaît toujours pas la hauteur exacte de ses enfants. Pour résoudre ce problème, vous devez ajouter clear: both en utilisant div avec une classe supplémentaire .clearboth ou css: before ou: after pseudo-selector.

voir mon violon ici

Dans mon approche ci-dessus, j'utilise la barre latérale fixe et j'ajoute une marge gauche sur .yourteachers pour résoudre le problème de hauteur de la barre latérale. Pour une meilleure mise en œuvre, je vous recommande d'utiliser la boîte flexible afin de ne pas utiliser la barre latérale en position fixe.

0
Fathur Hidayat 26 janv. 2019 à 23:08
<!-- 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;
}
0
jpfetest 26 janv. 2019 à 23:31

Avez-vous essayé height: 100vh? La hauteur s'ajuste automatiquement, donc juste height: 100% signifie 100% de la hauteur du parent.

-1
kaziutus 26 janv. 2019 à 22:24