html - 如何将 div 拉伸(stretch)到页面的所有高度？-6ren

html - 如何将 div 拉伸(stretch)到页面的所有高度？

转载作者：行者123 更新时间：2023-12-04 07:33:24

我在使用 CSS 时遇到了问题。
我有两个 div(侧边栏“lbar”和内容“rfeed”) 这两个 div 应该被拉伸(stretch)到页面的最底部。好吧，它们现在只到了文本结束的地方，如您在屏幕截图中看到的那样。我试图修复它，但我没有发现任何人和我有同样的问题。我认为这是因为柔性显示，但我需要使用它。
这是我的代码

      * {
        margin: 0;
        padding: 0;
        font-family: 'Open Sans', sans-serif;
      }
      html, body {
        height: 100%;
      }
      .feed {
        display: flex;
      }
      .lbar {
        flex: 20%;
        background-color: #333333;
        color: white;
        padding: 15px;
        min-height: 100%;
        float: left;
      }
      .rfeed {
        flex: 80%;
        background-color: #4d4d4d;
        padding: 10px;
        padding-left: 15px;
        color: white;
      }
      img {
        max-width: 100%;
        height: auto;
      }
      .name {
        font-weight: 900;
        font-size: 40px;
      }
      .rank {
        background-color: #6321ff;
        padding: 5px;
        text-align: center;
        border-radius: 10px;
      }
      button {
        background-color: #0063db;
        border: 5px #0073e6 solid;
        padding: 5px;
        font-weight: 900;
        color: white;
        border-radius: 30px;
        width: 200px;
        font-size: 19px;
        background: linear-gradient(to left, #0063db 50%, #0073e6 50%) right;
        background-size: 200%;
        transition: .5s ease-out;
      }
      button:hover {
        background-position: left;
        cursor: pointer;
      }
      button:active {
        transform: translateY(5px);
      }
      .topmenu {
        background-color: #333333;
        padding-top: 20px;
        padding-bottom: 20px;
        border-radius: 3px;
        width: 100%;
        margin: 0;
        text-align: center;
      }
      .menuitem {
        margin: 20px;
      }
      .menuitem:hover {
        text-decoration: overline;
        cursor: pointer;
      }
      .menuactive {
        background-color: #0063db;
      }
      table {
        margin-top: 50px;
      }
      table, th, td {
        border-bottom: 1px solid #333333;
        border-top: 1px solid #333333;
        border-collapse: collapse;
        padding: 5px;
      }
      a {
        color: white;
        text-decoration: none;
      }
      th {
        text-align: left;
      }
      td {
        cursor: pointer;
      }

<!DOCTYPE html>
<html lang="cs" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Panel - Podpora │ Minex</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
    <style media="screen">

    </style>
  </head>
  <body>
    <div class="content">
    <div class="feed">
      <div class="lbar">
        <img src="https://cravatar.eu/helmavatar/cyan/190.png">
        <p class="name">Content</p>
        <p class="rank">Content</p>
        <button type="button" name="logout" style="margin-top: 90px;">Content</button>
        <button type="button" name="changepass" style="margin-top: 20px;">Content</button>
        <button type="button" name="updateskin" style="margin-top: 20px;">Content</button>
      </div>
      <hr style="margin: 0px; color: #191919;">
      <div class="rfeed">
        <div class="topmenu">
          <b class="menuitem"><a href="../index.html">Content</a></b>
          <b class="menuitem" style="background-color: #0063db; padding: 3px; border-radius: 5px; padding-left: 10px; padding-right: 10px; border: 5px #0073e6 solid;"><a href="index.html">Content</a></b>
          <b class="menuitem"><a href="content/index.html">Content</a></b>
        </div>
          <table style="width:100%">
            <tr>
              <th>Content</th><th>Content</th><th>Content</th><th>Content</th><th>Content</th>
            </tr>
              <tr><td>Content</td><td>Content</td><td>Content</td> <td>Content</td><td>Content</td></tr>
              <tr><td>Content</td><td>Content</td><td>Content</td> <td>Content</td><td>Content</td></tr>
              <tr><td>Content</td><td>Content</td><td>Content</td> <td>Content</td><td>Content</td></tr>              
          </table>
      </div>
    </div>
    </div>
  </body>
</html>

最佳答案

设置 min-height对于 .lbar至calc(100vh - 30px) .我们减去 30px考虑额外的填充。

* {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

html,
body {
  height: 100%;
}

.feed {
  display: flex;
}

.lbar {
  flex: 20%;
  background-color: #333333;
  color: white;
  padding: 15px;
  min-height: calc(100vh - 30px);
  float: left;
}

.rfeed {
  flex: 80%;
  background-color: #4d4d4d;
  padding: 10px;
  padding-left: 15px;
  color: white;
}

img {
  max-width: 100%;
  height: auto;
}

.name {
  font-weight: 900;
  font-size: 40px;
}

.rank {
  background-color: #6321ff;
  padding: 5px;
  text-align: center;
  border-radius: 10px;
}

button {
  background-color: #0063db;
  border: 5px #0073e6 solid;
  padding: 5px;
  font-weight: 900;
  color: white;
  border-radius: 30px;
  width: 200px;
  font-size: 19px;
  background: linear-gradient(to left, #0063db 50%, #0073e6 50%) right;
  background-size: 200%;
  transition: .5s ease-out;
}

button:hover {
  background-position: left;
  cursor: pointer;
}

button:active {
  transform: translateY(5px);
}

.topmenu {
  background-color: #333333;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 3px;
  width: 100%;
  margin: 0;
  text-align: center;
}

.menuitem {
  margin: 20px;
}

.menuitem:hover {
  text-decoration: overline;
  cursor: pointer;
}

.menuactive {
  background-color: #0063db;
}

table {
  margin-top: 50px;
}

table,
th,
td {
  border-bottom: 1px solid #333333;
  border-top: 1px solid #333333;
  border-collapse: collapse;
  padding: 5px;
}

a {
  color: white;
  text-decoration: none;
}

th {
  text-align: left;
}

td {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="cs" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Panel - Podpora │ Minex</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
  <style media="screen">

  </style>
</head>

<body>
  <div class="content">
    <div class="feed">
      <div class="lbar">
        <img src="https://cravatar.eu/helmavatar/cyan/190.png">
        <p class="name">Content</p>
        <p class="rank">Content</p>
        <button type="button" name="logout" style="margin-top: 90px;">Content</button>
        <button type="button" name="changepass" style="margin-top: 20px;">Content</button>
        <button type="button" name="updateskin" style="margin-top: 20px;">Content</button>
      </div>
      <hr style="margin: 0px; color: #191919;">
      <div class="rfeed">
        <div class="topmenu">
          <b class="menuitem"><a href="../index.html">Content</a></b>
          <b class="menuitem" style="background-color: #0063db; padding: 3px; border-radius: 5px; padding-left: 10px; padding-right: 10px; border: 5px #0073e6 solid;"><a href="index.html">Content</a></b>
          <b class="menuitem"><a href="content/index.html">Content</a></b>
        </div>
        <table style="width:100%">
          <tr>
            <th>Content</th>
            <th>Content</th>
            <th>Content</th>
            <th>Content</th>
            <th>Content</th>
          </tr>
          <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
          </tr>
          <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
          </tr>
          <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</body>

</html>