How to stretch the div to all the height of the page?

June 26, 2021 by Code Error

Posted By: Anonymous

I ran into an issue while using CSS.
I have two divs (Sidebar "lbar" and Content "rfeed") These two divs are supposed to be stretched to the very bottom of the page. Well, they are now only to the point where the text ends as you can see in the screenshot. I tried to fix it, but i did not find anyone to have the same issue as i do. I think it’s because of the flex display, but i need to use it.

This is my code

_x000D_

      * {
        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;
      }

_x000D_

<!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:[email protected]&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>

_x000D_

Solution

Set min-height for .lbar to calc(100vh - 30px). We subtract 30px to account for the extra padding.

_x000D_

* {
  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;
}

_x000D_

<!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:[email protected]&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>

_x000D_

Answered By: Anonymous

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

How to stretch the div to all the height of the page?

Posted By: Anonymous

Solution

Answered By: Anonymous

Related Articles

Leave a Reply Cancel reply