Hi I am currently working on a small web interface. My problem is a vertical scrollbar which appears even though I have set the
body{
height:100vh;
margin:0;
padding:0;
}
For my understanding this should set the height of the body to the full height of the viewport while removing every margin / padding. This means that there is no space around the body so there shouldn't be any scrolling.
Here is a screenshot from the current view.
As you can see there is a vertical scrollbar aswell as the footer not being shown correctly.
My Current code can be found here:
:root {
--white: #FFFFFF;
--grey_237: #EDEDED;
--grey_220: #DCDCDC;
--grey_178: #B2B2B2;
--grey_107: #6B6B6B;
--functional_red: #D90000;
--fucntional_yellow: #FECB00;
--functional_green: #46A800;
--functional_blue: #009DE0;
--company: #544b83
}
.card-3 {
grid-column-end: span 3
}
.card-4 {
grid-column-end: span 4
}
.card-5 {
grid-column-end: span 5
}
.card-10 {
grid-column-end: span 10
}
.justify_right {
justify-items: end;
text-align: end
}
.no_margin {
margin: 0
}
.no_padding {
padding: 0
}
.start-1 {
grid-column-start: 1
}
.start-2 {
grid-column-start: 2
}
.start-3 {
grid-column-start: 3
}
.start-4 {
grid-column-start: 4
}
.start-5 {
grid-column-start: 5
}
.deep-2 {
grid-row-end: span 2
}
.uppercase {
text-transform: uppercase
}
.card {
background-color: #fff
}
body {
background-color: var(--grey_237);
display: grid;
grid-template-rows: auto 1fr auto;
grid-gap: 25px;
height: 100vh;
margin: 0;
padding: 0;
}
.container {
max-width: 90%
}
#content {
height: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 25px
}
.color_bg {
background-color: var(--company);
color: var(--white)
}
#brand_header {
display: grid;
height: 70px;
text-align: center;
align-content: center
}
#slogan {
display: grid;
align-content: center;
font-weight: 900
}
#branding_title {
font-weight: 700;
color: var(--company)
}
#content_title {
color: var(--company);
font-size: 3em;
font-weight: 900;
}
.card_title {
font-weight: 600!important;
font-size: 2em
}
.card-right {
display: grid;
grid-template-columns: 1fr 1fr
}
.card-right .card-body {
display: grid;
grid-gap: 5px
}
.card_change {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 5px;
align-items: center
}
.card_value {
display: grid;
align-self: end
}
.card_change {
display: grid;
align-self: start
}
.card_graph {
background-image: url(https://via.placeholder.com/150x150?text=graph);
background-size: cover;
background-position: center
}
#trends {
background-image: url(https://via.placeholder.com/550x350?text=graph);
background-size: cover;
background-position: center
}
#footer {
display: grid;
height: 40px;
background-color: white;
display: grid;
align-items: center
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- custom css -->
<link rel="stylesheet" href="style.css">
<title>Site</title>
</head>
<body>
<div id="header">
<div id="brand_header" class="color_bg">
<div class="container">
<div id="header_text" class="row justify-content-between">
<div id="slogan" class="justify_right">
<p class="no_margin uppercase">Our slogan</p>
</div>
</div>
</div>
</div>
<div id="navbar">
<nav class="navbar navbar-light bg-light">
<div class="container no_padding">
<span class="navbar-brand no_margin uppercase" id="branding_title">
Our Team
</span>
</div>
</nav>
</div>
</div>
<div id="content" class="container no_padding">
<div class="card-3 start-1">
<h2 id="content_title">title</h2>
</div>
<div id="card_1" class="card card-3 start-1 card-right">
<div class="card-body">
<h5 class="card_title text-muted">Card 3</h5>
<h2 class="card_value no_margin">Data</h2>
<div class="card_change">
<span id="card_1_change_value" class="change_value">change</span>
</div>
</div>
<div id="card_1_graph" class="card_graph thumbnail ">
<div class="chart-container" style="position: relative; width:99%; height:99%;">
<canvas id=""></canvas>
</div>
</div>
</div>
<div id="trends" class="card card-10 deep-2 ">
<div class="chart-container" style="position: relative; width:99%; height:99%;">
<canvas id=""></canvas>
</div>
</div>
</div>
<div id="footer">
<div class="container">
footer
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>A link to codepen can be found here:
Codepen Link
There will be some charts inside the cards. That is the reason why there is the following snippet:
<div class="chart-container" style="position: relative; width:99%; height:99%;">
<canvas id=""></canvas>
</div>
It was created according to the documentation of chart.js
My Idea of the problems cause
My current idea is that the content of the body is to big in order to be rendered correctly. While this sounds like a reasonable cause I don't know why this occured since I was using relative units.
I'd be happy for your assistance and I'd like to thank everybody in advance.
Added later:
I tried to use
overflow:hidden;
The problem here is, even though it solves the scrollbar problem the webpage is still not showing the while view (only half the footer)
I was looking through the dev tools when I've been seeing this:
It seems like the body is scaling correctly (100vh) but the footer seems to be partially rendered outside the body.
Don't know why this is happening but it seems interesting.
There was the idea that my grid-gap is causing the issue since it forces a gap.
I was testing this here and it's not the problem since the fr unit is adjusting accordingly.
body {
margin: 0;
padding: 0;
height: 100vh;
}
.content {
height: 100%;
display: grid;
grid-template-rows: 1fr 1fr;
grid-gap: 25px;
}
#div1 {
background-color: aquamarine;
}
#div2 {
background-color: blanchedalmond;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="content">
<div id="div1">
This is div 1
</div>
<div id="div2">
This is div 2
</div>
</div>
</body>
</html>I then tried the same but with margin instead of grid-gap.
The result is still the same as fr is not only adjusting to grid-gap but also all the other paddings / margins.
body {
margin: 0;
padding: 0;
height: 100vh;
}
.content {
height: 100%;
display: grid;
grid-template-rows: 1fr 1fr;
}
#div1 {
background-color: aquamarine;
}
#div2 {
margin-top: 25px;
background-color: blanchedalmond;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="content">
<div id="div1">
This is div 1
</div>
<div id="div2">
This is div 2
</div>
</div>
</body>
</html>
