文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将div伸展到整个页面的高度？

问如何将div伸展到整个页面的高度？
EN

Stack Overflow用户
提问于 2021-06-05 23:31:10
回答 2查看 44关注 0票数 2

我在使用CSS时遇到了一个问题。我有两个div(边栏"lbar“和内容"rfeed")，这两个div应该延伸到页面的最底部。好了，它们现在只是到了你在截图中看到的文本结束的地方。我试着解决它，但我没有找到任何人有和我一样的问题。我想是因为flex显示屏的原因，但我需要使用它。

​

这是我的代码

​

代码语言：javascript
复制
      * {
        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;
      }
代码语言：javascript
复制
<!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>

​

html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-06-05 23:40:07

将.lbar的min-height设置为calc(100vh - 30px)。我们减去30px来计算额外的填充。

​

代码语言：javascript
复制
* {
  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;
}
代码语言：javascript
复制
<!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>

​

票数 1
EN

Stack Overflow用户

发布于 2021-06-05 23:45:57

您可以将.content和.feed设置为具有height: 100%，我刚刚将它们包含在html和body中

代码语言：javascript
复制
html, body, .content, .feed {
    height: 100%;
}

并从.lbar中删除min-height。最终的代码应该如下所示：

​

代码语言：javascript
复制
      * {
        margin: 0;
        padding: 0;
        font-family: 'Open Sans', sans-serif;
      }
      html, body, .content, .feed {
        height: 100%;
      }
      .feed {
        display: flex;
      }
      .lbar {
        flex: 20%;
        background-color: #333333;
        color: white;
        padding: 15px;
        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;
      }
代码语言：javascript
复制
<!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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67851157

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档