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
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ^ Reset ^ */
/* 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 >
<svg 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 type="search" id="query">
</div>
<div >
<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 >
<img src="images/hand-forged-viking-sword_934x700.jpg">
<p>Hi there,</p>
<h2>Morgan Oakley(@morgan)</h2>
</div>
<div >
<button>New</button>
<button>Upload</button>
<button>Share</button>
</div>
</header>
<main>
<div ><h3>Your Projects</h3>
</div>
<div >
<h3>Announcements</h3>
<div >
<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 ><h3>Trending</h3></div>
</main>
<aside>
<div >
<div >
<svg 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=""><svg style="width: 18px;height: 18px" viewBox="0 0 24 24">
<path fill="#fff" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
</svg><span >Home</span></a>
<a href=""><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 >Profile</span></a>
<a href=""><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 >Messages</span></a>
<a href=""><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 >History</span></a>
<a href=""><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 >Tasks</span></a>
<a href=""><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 >Communities</span></a>
<a href=""><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 >Settings</span></a>
<a href=""><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 >Support</span></a>
<a href=""><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 >Privacy</span></a>
</div>
</aside>
</div>
</aside>
</body>
</html>CodePudding user response：
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.
CodePudding user response：
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.