Question

我有一个快速的问题，每当我垂直调整网页大小时，底部div就会与顶部div重叠。我使用了像素，这就是为什么我无法弄清楚这一点，当我使用像素时，应该没有重叠的div，对吗？当我垂直调整页面大小时，会发生以下情况：

如您所见，红色div与网页顶部的框重叠。

这是我的代码

<div class="wrapper">
      <nav>
        <div class="container">
          <ul>
            <li><a href="#" class="active"><i class="fab fa-houzz"></i></a></li>
            <li><a href="#">Ban</a></li>
            <li><a href="#">Warn</a></li>
            <li><a href="#">Gift</a></li>
            <li><a href="#">User</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Reports</a></li>
            <li><a href="#">Omar</a></li>
          </ul>
        </div>
      </nav>
      <div class="tree-bar">
        <p>Home</p>
      </div>
      <div class="content">
        <div class="info-box-container">
          <div class="info-box">
            <div class="left">
              <div class="top">
                <p>100</p>
              </div>
              <div class="bottom">
                <p>Reports</p>
              </div>
            </div>
            <div class="right">
              <i class="fas fa-bug"></i>
            </div>
          </div>
          <div class="info-box">
            <div class="left">
              <div class="top">
                <p>3000</p>
              </div>
              <div class="bottom">
                <p>Users</p>
              </div>
            </div>
            <div class="right">
              <i class="fas fa-user-astronaut"></i>
            </div>
          </div>
          <div class="info-box">
            <div class="left">
              <div class="top">
                <p>8</p>
              </div>
              <div class="bottom">
                <p>Moderators</p>
              </div>
            </div>
            <div class="right">
              <i class="fas fa-hands-helping"></i>
            </div>
          </div>
        </div>
        <div class="bottom-content">
          <p>Current Moderators</p>
          <table>
            <tr>
              <th>ID</th>
              <th>Username</th>
              <th>Email</th>
            </tr>
            <tr>
              <td>129-2121</td>
              <td>Omard2000</td>
              <td>omar.s.dajani@gmail.com</td>
            </tr>
            <tr>
              <td>242-2932</td>
              <td>KillerMad</td>
              <td>killermad@gmail.com</td>
            </tr>
            <tr>
              <td>764-9823</td>
              <td>Peke</td>
              <td>peke@gmail.com</td>
            </tr>
            <tr>
              <td>091-8932</td>
              <td>Alec</td>
              <td>alecrcs@gmail.com</td>
            </tr>
            <tr>
              <td>124-3923</td>
              <td>Codename</td>
              <td>codenamesi@gmail.com</td>
            </tr>
            <tr>
              <td>921-8934</td>
              <td>ShadyDingo</td>
              <td>shadydingo@gmail.com</td>
            </tr>
            <tr>
              <td>012-8342</td>
              <td>Dropkik</td>
              <td>dropkiks@gmail.com</td>
            </tr>
            <tr>
              <td>021-9439</td>
              <td>Slicer</td>
              <td>slicer@gmail.com</td>
            </tr>
            <tr>
              <td>894-8934</td>
              <td>CrazyKilla</td>
              <td>crazykilla@gmail.com</td>
            </tr>
            <tr>
              <td>239-0594</td>
              <td>Lolo</td>
              <td>lolo@gmail.com</td>
            </tr>
            <tr>
              <td>092-0923</td>
              <td>RodaKiller</td>
              <td>rodakiller@gmail.com</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

body {
  margin: 0;
  padding: 0;

  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  height: 100vh;
}

nav {
  width: 100%;
  height: 44px;
  overflow: scroll;

  background:   #323232;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

nav ul {
  display: flex;
  height: 44px;
  justify-content: space-around;
  align-items: center;

  padding: 0;
  margin: 0;
  list-style-type: none;
}

nav a {
  display: block;

  color: white;
  font-size: 15px;
  font-weight: lighter;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

ul li:last-child a {
  font-weight: normal;
}

nav ul li a.active {
  color: #B7B7B7;
}

.tree-bar {
  height: 40px;

  margin-bottom: 20px;

  background-color: #F7F7F7;
}

.tree-bar p {
  display: flex;
  align-items: center;

  height: 100%;

  margin: 0 2%;
  padding: 0;

  font-weight: lighter;
}

.content {
  display: flex;
  flex-direction: column;
  height: calc(100% - 104px);
}

.content .info-box-container {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 120px;
  margin-bottom: 20px;
}

.content div:last-child {
  margin: 0;
}

.info-box {
  display: flex;
  overflow: auto;
  height: 120px;
  width: 25%;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
  margin-right: 10px;
}

.info-box .right {
  display: flex;
  justify-content: center;
  flex: 1;
}

.info-box .right i {
  align-self: center;
  color: grey;
  font-size: 40px;
}

.info-box .left {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.info-box .left .top {
  display: flex;
  justify-content: center;
  flex: 1;
}

.info-box .left .top p {
  display: flex;
  align-self: flex-end;

  margin-bottom: 2.5px;

  font-size: 19px;
  font-weight: lighter;
}

.info-box .left .bottom {
  display: flex;
  justify-content: center;
  flex: 1;
}

.info-box .left .bottom p {
  margin-top: 2.5px;

  font-size: 19px;
}

.bottom-content {
  display: flex;
  align-self: center;
  flex-direction: column;

  width: 76.5%;
  height: 475px;
  background: red;
}

.bottom-content table {
  border-collapse: collapse;
  width: 100%;
}

.bottom-content p {
  margin-left: 5px;
  font-size: 18px;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

th {
    background-color: dodgerblue;
    color: white;
}

谢谢！

垂直调整窗口大小时，为什么下div与上div重叠？

0 个答案: