Having some issues with Height of webpage

Question

I am working on a basic mockup layout for a course and I have noticed that there is a gap at the bottom of my webpage which I do not know how to get rid of. I put my body height to 100% but there is still a large gap. I was hoping someone could point out any mistake I made that might be causing this.

Thanks,

-Hendrik

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* Colors 
Teal -- #1992D4
White -- #FFFFFF
Light Gray -- #E2E8F0
Gold -- #F0B429
Dark Gray -- #333333
Medium Gray -- #636363 -- Card Text



*/
/* Layout/General */

body {
  height: 100%;
  width: 100%;
  font-family: "Roboto", sans-serif;
  display: grid;
  grid-template-columns: 0.9fr 5fr;
  grid-template-rows: 1.09fr 4.2fr;
}

header {
  background-color: #fff;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  box-shadow: 4px 5px 5px #d0d6dd;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: 1fr 1fr;
  z-index: 10;
  align-items: center;
  justify-items: center;
}

main {
  background-color: #e2e8f0;
  grid-area: 2/2/3/3;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 1fr 1fr;
  position: relative;
}
aside {
  /* width: 450px;
  height: 1480px; */
  grid-column: 1/2;
  grid-row: 1/3;
  background-color: #1992d4;
  font-weight: 700;
  display: grid;
  grid-template-rows: 12px 6fr 3fr;
  grid-template-columns: 15px 1fr;
}

/* Sidebar */

aside div h3 {
  text-decoration: none;
  color: #fff;
  font-size: 1.33rem;
  padding-top: 0.6px;
}

a:link,
a:visited {
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
}

aside svg {
  display: inline-block;
  vertical-align: middle;

  padding-right: 10px;
  padding-bottom: 3.6px;
}
aside a > svg {
  padding-left: 7px;
}
aside a {
  margin-left: -1px;
}
.sidebar-grid {
  display: grid;
  grid-area: 2/2/3/3;
  grid-template-columns: 1fr;

  align-items: center;
}

a:nth-child(7) {
  margin-bottom: 40px;
}
.sidebar-link-text {
  padding-left: 8px;
}
.dashboard-flex {
  align-self: start;
  margin-left: -2px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.dashboard-icon {
  padding-top: 3.05px;
}

/* Header */
.search-bar {
  width: 78%;
  min-width: 300px;
  max-width: 620px;
  display: flex;
  align-items: center;
  margin-left: calc(5% + 2px);
  justify-self: start;
}
.magnify-icon {
  padding: 0 13.5px 0 0;
}
.search-field {
  background-color: #e2e8f0;
  color: #38393a;
  font-size: 0.7rem;
  border-radius: 10px;
  border: 4.8px solid #e2e8f0;
  grid-area: 1/1/2/2;
  width: 100%;

  outline: none;
  /* max-width: 700px; */
}

.notification-profile-block {
  display: grid;
  grid-column: 2/3;
  grid-row: 1/2;
  grid-auto-flow: column;
  justify-items: center;
  align-items: center;
  column-gap: 26px;
  left: 45px;
  position: relative;
}

.notification-profile-block > p {
  font-weight: 600;
  font-size: 14.7px;
}

img[alt="profile"] {
  background-color: black;
  border-radius: 50%;
  width: 40px;
  height: 39px;
}

.buttons-container {
  margin-right: 33px;
  margin-bottom: 7px;
  display: grid;
  width: 100%;
  grid-auto-flow: column;

  grid-template-columns: 108px 108px 108px;
  left: 45px;
  justify-content: center;
  position: relative;
}
header button {
  padding: 8px 8px;
  width: 83px;
  background-color: #1992d4;
  border-radius: 20px;
  border: none;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}

.introduction-box {
  justify-self: start;

  display: grid;
  padding-left: 42px;
  column-gap: 17px;
  justify-items: center;
  align-items: center;
  grid-template-columns: 0.2fr 1fr;
  transform: translate(0px, -6px);
}
.introduction-box p {
  font-size: 11px;
  font-weight: 900;
  grid-area: 1/2/2/3;
  align-self: flex-start;
  justify-self: start;
  padding-top: 7px;
}
.introduction-box h2 {
  font-weight: 900;
  grid-area: 1/2/2/3;
  font-size: 18px;
  align-self: center;
  padding-top: 15px;
}
.introduction-image {
  border-radius: 50%;
  width: 54px;
  height: 53px;

  /* altered image */
  /* border-radius: 50%;
  width: 58px;
  height: 56.5px;
  padding-right: 15px; */
}

/* Main */
main {
  padding: 0 40px 0 20px;
}
main > div {
  transform: translate(0px, 35px);
  font-size: 12px;
}
main p {
  color: #4e4e4e;
  font-size: 11px;
}
main > div > div {
  background-color: #fff;
  top: 30px;
  box-shadow: 2px 3.5px 4px #c8cbd1;
  border-radius: 6px;
}
main h3 {
  position: relative;
  bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}
.announcements p {
  padding-bottom: 35px;
  max-width: 240px;
  text-align: left;
  line-height: 1.25;
}
.announcements p:first-child {
  padding-top: 0;
}
.announcements p:last-child {
  padding-bottom: 0;
}
.announcements {
  grid-column: 2/3;
  grid-row: 1/2;
}

.announcements-inner {
  /* padding: 30px 30px 30px 30px ; */
}
.announcements-inner h5 {
  font-size: 13px;
  font-weight: 900;
  /* padding-bottom: 4px; */
}
.trending {
  grid-column: 2/3;
  grid-row: 2/3;
}
.trending h3 {
  margin-top: 30px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Admin Dashboard</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
<div class="search-bar">
    
  
    <svg class="magnify-icon" style="width:21px;height:21px" viewBox="0 0 24 24">
        <path fill="#000" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
    </svg><input class="search-field" type="search" id="query">
  
</div> 
<div class="notification-profile-block">
    <svg style="width:19.5px;height:19.5px" viewBox="0 0 24 24">
        <path stroke="#000" stroke-width="0.1" fill="#000" d="M10,21H14A2,2 0 0,1 12,23A2,2 0 0,1 10,21M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M17,11A5,5 0 0,0 12,6A5,5 0 0,0 7,11V18H17V11M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z" />
    </svg><img alt="profile" src="images/hand-forged-viking-sword_934x700.jpg"><p>Morgan Oakley</p>
</div>
<div class="introduction-box">
    <img class="introduction-image" src="images/hand-forged-viking-sword_934x700.jpg">
    <p>Hi there,</p>
    <h2>Morgan Oakley(@morgan)</h2>
</div>
<div class="buttons-container">
    <button>New</button>
    <button>Upload</button>
    <button>Share</button>
</div>

    </header>
    <main>
<div class="your-projects"><h3>Your Projects</h3>

</div>
<div class="announcements">
  
    <h3>Announcements</h3>
    <div class="announcements-inner">
    <h5>Site Maintenance</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <h5>Community Share Day</h5>
    <p>Neque gravida in fermentum et. Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. </p>
    <h5>Updated Privacy Policy</h5>
    <p>Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. Ac turpis egestas integer eget. Justo nec ultrices dui sapien.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit magni.
    </p>
</div>
</div>
<div class="trending"><h3>Trending</h3></div>

    </main>
    <aside>
        <div class="sidebar-grid">
            <div class="dashboard-flex">
         <svg class="dashboard-icon" style="width:37px;height:37px" viewBox="0 0 24 24">
                <path fill="white" d="M13,3V9H21V3M13,21H21V11H13M3,21H11V15H3M3,13H11V3H3V13Z" />
            </svg><h3>Dashboard</h3>
        </div>
   <a href=""class="home"><svg style="width: 18px;height: 18px" viewBox="0 0 24 24">
    <path fill="#fff" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
</svg><span class="sidebar-link-text">Home</span></a>
   <a href=""class="profile"><svg style="width: 18px;height: 18px" viewBox="0 0 24 24">
    <path fill="#fff" d="M22,3H2C0.91,3.04 0.04,3.91 0,5V19C0.04,20.09 0.91,20.96 2,21H22C23.09,20.96 23.96,20.09 24,19V5C23.96,3.91 23.09,3.04 22,3M22,19H2V5H22V19M14,17V15.75C14,14.09 10.66,13.25 9,13.25C7.34,13.25 4,14.09 4,15.75V17H14M9,7A2.5,2.5 0 0,0 6.5,9.5A2.5,2.5 0 0,0 9,12A2.5,2.5 0 0,0 11.5,9.5A2.5,2.5 0 0,0 9,7M14,7V8H20V7H14M14,9V10H20V9H14M14,11V12H18V11H14" />
</svg><span class="sidebar-link-text">Profile</span></a>
    <a href=""class="messages"><svg style="width: 18px;height: 18px" viewBox="0 0 24 24">
        <path fill="#fff" d="M22,4C22,2.89 21.1,2 20,2H4A2,2 0 0,0 2,4V16A2,2 0 0,0 4,18H18L22,22V4Z" />
    </svg><span class="sidebar-link-text">Messages</span></a>
   <a href=""class="history"><svg style="width: 18px;height: 18px" viewBox="0 0 24 24">
    <path fill="#fff" d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12S17.5 2 12 2M17 13H11V7H12.5V11.5H17V13Z" />
</svg><span class="sidebar-link-text">History</span></a>
   <a href=""class="tasks"><svg style="width: 18px;height: 18px" viewBox="0 0 24 24">
    <path fill="#fff" d="M16,9H21.5L16,3.5V9M7,2H17L23,8V18A2,2 0 0,1 21,20H7C5.89,20 5,19.1 5,18V4A2,2 0 0,1 7,2M3,6V22H21V24H3A2,2 0 0,1 1,22V6H3Z" />
</svg><span class="sidebar-link-text">Tasks</span></a>
    <a href=""class="communities"><svg style="width: 18px;height: 18px" viewBox="0 0 24 24">
        <path fill="#fff" d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5  18,16.18  18,18.25V20H5.5V18.25M0,20V 18C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24, 18V20Z" />
    </svg><span class="sidebar-link-text">Communities</span></a>


    <a href=""class="settings"><svg style="width: 18px;height: 18px" viewBox="0 0 24 24">
        <path fill="#fff" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
    </svg><span class="sidebar-link-text">Settings</span></a>
    <a href=""class="support"><svg style="width: 18px;height: 18px" viewBox="0 0 24 24">
        <path fill="#fff" d="M11,18H13V16H11V18M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z" />
    </svg><span class="sidebar-link-text">Support</span></a>
    <a href=""class="privacy"><svg style="width: 18px;height: 18px" viewBox="0 0 24 24">
        <path fill="#fff" d="M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z" />
    </svg><span class="sidebar-link-text">Privacy</span></a>
</div>
    </aside>

        </div>
    </aside>
  </body>
</html>

down-voted for posting over 500 lines of code. Pay extra attention for the word **minimal** in [repro] — tacoshy, May 18 '22 at 23:01

score 1 · Answer 1 · answered May 22 '22 at 23:57

1

position: relative;
right: x
left: x
top: x
bottom: x

Consider removing any implicit position px that would be x above.

answered May 22 '22 at 23:57

Suli Manack

49
1
10

Dieter Raber · Answer 2 · 2022-05-18T22:11:48.173

0

You'd be better off using vh/vw for the size as in:

body {
  height: 100vh;
  width: 100vw; 
}

Mind you that 100vw is implicit for block elements though and you probably won't need it. Depending on what you want, min-height: 100vh could be the better choice.

edited May 18 '22 at 22:11

answered May 18 '22 at 21:21

Dieter Raber

163
1
6

By the way, I don't see any issue with using `display: grid` as it had come up in another comment. – Dieter Raber May 18 '22 at 21:24
I put in those properties and there still seems to be a gap at the bottom of the page. Maybe the display: grid, somehow altering the height? – Hendrik May 21 '22 at 22:49
Your body has a margin of 8px that comes from the browser's default stylesheet. Add `margin: 0` to your CSS. Grid or Flex don't add anything to the size of an element. – Dieter Raber May 22 '22 at 07:10

score 0 · Answer 3 · answered May 22 '22 at 23:50

0

So I think I found the answer to the question. I somehow had a position: relative, right: 25px property and a bottom: 30px on one of the elements in my header which had pushed the entire layout to the right and bottom creating whitespace.

answered May 22 '22 at 23:50

Hendrik

75
6

score -1 · Answer 4 · answered May 18 '22 at 21:16

The issue is, you are using display: grid; property for your tag. You can achieve your design without grid layout also (can use flex layout as that will help you to make your website responsive also). Please refer this thread to understand how grid layout works.

Having some issues with Height of webpage

4 Answers4