网页高度有一些问题

Question

我正在为课程开发基本的模型布局，我注意到我的网页底部有一个差距，我不知道该如何摆脱。我将身体高度提高到100％，但仍然存在很大的差距。我希望有人可以指出我犯的任何错误，这可能引起这一点。

谢谢

- 亨德里克

/* 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>

Answer 1

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

考虑删除上面将是x的任何隐式位置PX。

Answer 2

最好使用vh/vw的大小，如下所示，

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

请注意100VW虽然对块元素隐含，但您可能不需要它。根据您想要的内容，最小值：100VH可能是更好的选择。

Answer 3

所以我想我找到了问题的答案。我以某种方式有一个位置：相对，右：25px属性和底部：标题中的一个元素之一，将整个布局推向右侧和底部，创建了空格。

Answer 4

问题是，您正在使用显示：网格;标签的属性。您也可以在没有网格布局的情况下实现设计（可以使用Flex布局，因为这也可以帮助您使网站响应迅速）。请参阅此了解网格布局的工作原理。