my page contains a grid layout.
I need to display a non permanent element (cookie consent element )
I placed it outside the document flow using position: absolute to not effect the grid layout.
I need every bit of space so I dont want to allocate extra space to a temporary element by adding a extra row
How can I fixate the starting Position of the element even when the page width and height changes ?
.cookie-consent {
background: red;
width: 200px;
height: 100px;
position: absolute;
bottom: 30px;
right: 150px;
z-index: 20;
}
:root {
padding-left: 10%;
padding-right: 10%;
}
.container {
display: grid;
height: 100vh;
margin: auto;
max-width: 80%;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr;
grid-template-areas:
"nav nav nav nav"
"component1 component1 component1 component1"
"component2 component2 component2 component2"
"footer footer footer footer";
grid-gap: 0.5rem;
font-weight: 800;
text-transform: uppercase;
text-align: center;
}
nav {
text-align: center;
background: #a7ffeb;
grid-area: nav;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component1 {
background: #6fffd2;
grid-area: component1;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component2 {
background: #64ffda;
grid-area: component2;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
footer {
background: #1de9b6;
grid-area: footer;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.cookie-consent {
background: red;
width: 200px;
height: 100px;
/* transform: translateX(-80%); */
/* /* margin-top: 50%; */
/* border-radius: var(--main-radius); */
/* margin-top: 30%; */
/* margin-left: 50%; */
/* top: 300px;
left: 30px;
bottom: 100px; */
position: absolute;
bottom: 30px;
right: 150px;
/* top: 5; */
/* right: 20; */
/* left: 2; */
/* bottom: 20; */
z-index: 20;
}
/* place the element cookie on top of the gird layout */
/* */
<!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" />
<!-- add style css to page -->
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="cookie-consent">
</div>
<div class="container">
<nav>Navbar</nav>
<div id="component1">component1</div>
<div id="component2">component2</div>
<footer>Footer</footer>
</div>
</body>
</html>
Use percentages instead of pixels in bottom and right property of .cookie-consent class. I also added overflow: hidden; to the body selector.
Also, consider setting the width and height (red div) not rigidly.
It should be better ;-)
I hope You will be content . Best regards !
:root {
padding-left: 10%;
padding-right: 10%;
}
body {
overflow: hidden;
}
.container {
display: grid;
height: 100vh;
margin: auto;
max-width: 80%;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr;
grid-template-areas: "nav nav nav nav" "component1 component1 component1 component1" "component2 component2 component2 component2" "footer footer footer footer";
grid-gap: 0.5rem;
font-weight: 800;
text-transform: uppercase;
text-align: center;
}
nav {
text-align: center;
background: #a7ffeb;
grid-area: nav;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component1 {
background: #6fffd2;
grid-area: component1;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component2 {
background: #64ffda;
grid-area: component2;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
footer {
background: #1de9b6;
grid-area: footer;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.cookie-consent {
background: red;
width: 200px;
height: 100px;
position: absolute;
bottom: 5%;
right: 9%;
z-index: 20;
}
<!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" />
<!-- add style css to page -->
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="cookie-consent">
</div>
<div class="container">
<nav>Navbar</nav>
<div id="component1">component1</div>
<div id="component2">component2</div>
<footer>Footer</footer>
</div>
</body>
</html>
Related
I did not have this issue before I attempted to switch to grid instead of manually placing everything. However, I am hoping someone can point out my issue. When I load the page my background.png is fine in the second container, but it bleeds from the first container to the top of the second, even though there is another section beneath it. Any tips are appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Iguana Removal</title>
<link href="https://fonts.googleapis.com/css2?family=Modak&family=Roboto+Slab&family=Six+Caps&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/iguanaremoval2.css">
</head>
<img class="BackgroundImage" src="images/iguanaBack.png" alt="Pixles Free to use picture of an iguana back.">
<header>
<section class="headerGrid">
<div class="headerHead"><h1>Our Removal Services</h1></div>
<div class="headerHome">Home</div>
<div class="headerIguanaRemoval">About</div>
<div class="headerRequests">Requests</div>
</section>
</header>
<body class="IRbody">
<section class="bodyGrid">
<div class="bodyHead">
<img src="images/background.png" class="textBackground">
<h2 class="underline">header</h2>
<div class="headText">
random text
</div>
</div>
<div class="companyFleet">
<img class="fleetImage" src="images/2015_team1.png" alt="picture of our 2015 team and fleet.">
</div>
<div class="body2">
<img src="images/background.png" class="textBackground">
<h2 class="underline IRBHead">header</h2>
<span>
random text
</span>
</div>
</section>
</body>
</html>
The CSS:
html{
background: black;
font-family: 'Roboto Slab', serif;
}
header{
background: navajowhite;
position: sticky;
text-align: center;
position: relative;
width: 95vw;
height: 10%;
left: 1%;
z-index: 40;
}
Body{
text-align: center;
grid-column: 25px;
grid-row-gap: 0;
}
/*img{
max-width: 100%;
max-height: 100%;
}*/
.BackgroundImage{
position: absolute;
width: 100%;
height: 100%;
left: 0;
z-index: -40;
}
/*******header********/
.headerGrid{
display: grid;
grid-column: 1fr 1fr 1fr;
grid-row: 1fr 1fr;
grid-template-areas:
". headerHead headerHead headerHead ."
". headerHome headerIguanaRemoval headerRequests .";
}
.blank{
grid-area: blank;
}
.headerHead{
grid-area: headerHead;
}
.headerHome{
grid-area: headerHome;
}
.headerIguanaRemoval{
grid-area: headerIguanaRemoval;
}
.headerRequests{
grid-area: headerRequests;
}
/*******Body********/
/*Images*/
.textBackground{
position: absolute;
height: 100%;
width: 100%;
left: 1%;
bottom: 0%;
z-index: -1;
}
.fleetImage{
width: 100%;
height: 100%;
left: 0%;
bottom: 0%;
}
/*mainbody*/
.bodyGrid{
display: grid;
grid-template-areas:
"bodyHead"
"companyFleet"
"body2";
}
.IRbody{
position: relative ;
width: 95vw;
}
.bodyHead{
grid-area: bodyHead;
}
.headText{
margin: 1px 1px;
}
.companyFleet{
grid-area: companyFleet;
width: 100%;
height: 75%;
}
.body2{
grid-area: body2;
}
I have four divs on my page and each one of them has a link. The problem is, I want the links to be the same width and height as the boxes, but for some reason the links stretch more than they should, and as a result the whole container which contains the four divs is clickable.
I've tried setting the anchor tags to display:inline-block; but that didn't work.
How do I fix this?
Codepen
EDIT: Fixed it by wrapping the anchor tags in divs.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--nav-clr: #ebebeb;
--box-r: #f94144;
--box-g: #43AA8B;
--box-y: #F9C74F;
--box-b: #577590;
}
body,
html {
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
/* nav bar */
nav {
display: flex;
height: 60px;
background-color: var(--nav-clr);
align-items: center;
}
.logo {
width: 150px;
height: auto;
margin-left: 1em;
}
/* buttons */
.box-btn {
/* margin: 20px; */
width: auto;
height: 259px;
background: #43AA8B;
border-radius: 30px;
position: relative;
}
.box-btn::after {
content: '';
position: absolute;
display: inline-block;
/* margin: 20px; */
width: 100%;
bottom: 0;
rightt: 0;
height: 100px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
background: var(--nav-clr);
z-index: 1;
}
.content {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fit, 250px);
gap: 20px;
/* background-color: red; */
}
/* main */
.main-wrapper {
height: 100vh;
display: grid;
justify-content: center;
grid-template-columns: 80vw;
grid-template-rows: 25% 5% 65%;
/* gap: 20px; */
}
/* header */
.title-wrapper {
margin: 70px;
display: inline-block;
font-size: 1.3em;
text-align: center;
grid-row: 1/3;
}
/* SMALLER SCREENS */
#media screen and (max-width:700px) {
.title-wrapper {
font-size: 1em;
margin: auto;
}
nav {
justify-content: center;
}
}
#media screen and (max-width:626px) {
.content {
grid-template-columns: repeat(auto-fit, 350px);
}
.box-btn {
height: 350px;
}
.box-btn::after {
width: 100%;
height: 135px;
bottom: 0;
}
}
#media screen and (max-width:405px) {
.title-wrapper {
font-size: .8em;
}
}
<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">
<link rel="stylesheet" href="style.css">
<title>T3 Dashboard</title>
</head>
<body>
<div class="wrapper">
<nav>
<a href="http://t3-ks.com/">
<div class="logo-container">
<img src="/t3s.svg" alt="" class="logo">
</div>
</a>
</nav>
<main>
<div class="main-wrapper">
<div class="title-wrapper">
<h1>Menaxhimi i burimeve njerëzore</h1>
</div>
<div class="content">
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
</div>
</div>
</main>
</body>
</html>
I tried to change some css in the grey area. Is this what you want? If you want an element to be on the bottom, you can set bottom: 0; to its css when positioned absolute.
I would add to your most external container the css property pointer-events: none and to the internal one pointer-events:all. If what you want is not giving click feature to the external containers, this might solve the issue.
.content > a {
pointer-events: none;
}
.box-btn {
pointer-events: all;
}
So I've been trying to overlap grid 2 over grid 1 without using negative margins but I'm unable to do so please help
Here's my code
index.html
<!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>Document</title>
<link rel="stylesheet" href="./styles/styles.css" />
</head>
<body>
<div class="HeaderContainerGrid">
<img src="./svg/background.svg" />
<header>
<h1>Guideline</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
styles.scss
#import './variables';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
img {
width: 100%;
}
header {
grid-template-columns: 1fr 1fr;
display: grid;
align-items: end;
justify-content: end;
h1 {
display: grid;
height: 100%;
align-items: center;
margin-left: 1em;
}
nav {
height: 100%;
display: grid;
align-items: center;
grid-template-columns: 1fr;
}
ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
text-decoration: none;
list-style: none;
}
li {
margin-left: 10px;
margin-right: 10px;
padding: 20px;
text-align: center;
&:hover {
cursor: pointer;
background-color: $secondaryColor;
transition: 0.5s;
color: $onHoverTextColor;
}
}
}
.HeaderContainerGrid {
display: grid;
&:nth-child(1) {
background-color: red;
grid-row: 1 / 2;
z-index: 1
}
&:nth-child(0) {
grid-row: 1 / 2;
z-index: -1
}
}
CodeSandbox URL
Make header position absolute so that it will come out from its normal flow and come over the nearest relative position.
DEMO
header{
position: absolute;
}
.HeaderContainerGrid {
position: relative;
}
I'm trying to create my website as follow:
In here, the logo image overlaps the grid of the navigation bar.
I have also used CSS grid layout to create the navigation bar, but I'm having trouble making the image expand outside of the border.
This is currently what I have:
Basically, I want the background orange image (border) to shrink in the size vertically so I can have the same design as the above.
#main {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1.5fr;
grid-template-rows: 0.02fr 0.2fr 0.1fr 0.25fr 0.45fr;
grid-template-areas:
"nav nav nav nav"
"main-heading main-heading main-heading main-heading"
"sub-heading sub-heading sub-heading sub-heading"
"icons icons icons icons"
"images images images contents";
grid-gap: 0.2rem;
}
#navbar {
border-top: 1px solid black;
}
#navbar {
display: inline-block;
grid-area: nav;
background: orange;
border-radius:var(--main-radius);
padding-top: var(--main-padding);
}
#navbar img, header, ul, li {
display: inline-block;
vertical-align: middle;
}
#navbar img {
border-radius: 50%;
margin-left: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*display: inline-block;*/
float: right;
margin-top: 25px;
margin-right: 20px;
}
li {
display: inline-block;
padding: 12px;
}
#main-heading {
grid-area: main-heading;
background: yellow;
}
#sub-heading {
grid-area: sub-heading;
background: pink;
}
#icons {
grid-area: icons;
background: lightblue;
}
#images {
grid-area: images;
background: orange;
}
#contents {
grid-area: contents:
background: brown;
}
/*#media only screen and (max-width: 600px) {
#main {
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2 0.5;
grid-template-areas:
"nav"
"sidebar"
"main"
"content1"
"content2"
"content3";
}
}*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive J Web</title>
<link rel="stylesheet" href="Lab04.css">
</head>
<body>
<div id = "main">
<div id = "navbar">
<img src="lens.jpg" alt=lens width=90px height=90px>
<header>
<h3>
Art of Photography
</h3>
</header>
<ul>
<li>Photography</li>
<li>History</li>
<li>Samples</li>
<li>About</li>
</ul>
</div>
<div id = "main-heading">Main-heading</div>
<div id = "sub-heading">Sub-heading</div>
<div id = "icons">Icon</div>
<div id = "images">Images</div>
<div id ="contents">Contents</div>
</div>
</body>
</html>
In order to do the same design, you need to change the position of the logo img as absolute, and give some space to put the logo.
#navbar img {
border-radius: 50%;
margin-left: 20px;
top: -13px;
position:absolute;
}
#main {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1.5fr;
grid-template-rows: 0.02fr 0.2fr 0.1fr 0.25fr 0.45fr;
grid-template-areas:
"nav nav nav nav"
"main-heading main-heading main-heading main-heading"
"sub-heading sub-heading sub-heading sub-heading"
"icons icons icons icons"
"images images images contents";
grid-gap: 0.2rem;
}
#navbar {
border-top: 1px solid black;
}
#navbar {
display: inline-block;
grid-area: nav;
background: orange;
border-radius:var(--main-radius);
padding-top: var(--main-padding);
position: relative;
}
#navbar img, header, ul, li {
display: inline-block;
vertical-align: middle;
}
#navbar img {
border-radius: 50%;
margin-left: 20px;
top: -13px;
position:absolute;
}
h3 {
margin-left:120px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*display: inline-block;*/
float: right;
margin-top: 25px;
margin-right: 20px;
}
li {
display: inline-block;
padding: 12px;
}
#main-heading {
grid-area: main-heading;
background: yellow;
}
#sub-heading {
grid-area: sub-heading;
background: pink;
}
#icons {
grid-area: icons;
background: lightblue;
}
#images {
grid-area: images;
background: orange;
}
#contents {
grid-area: contents:
background: brown;
}
/*#media only screen and (max-width: 600px) {
#main {
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2 0.5;
grid-template-areas:
"nav"
"sidebar"
"main"
"content1"
"content2"
"content3";
}
}*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive J Web</title>
<link rel="stylesheet" href="Lab04.css">
</head>
<body>
<div id = "main">
<div id = "navbar">
<img src="https://www.allintheloop.com/assets/img/logo-sample.jpg" alt=lens width=90px height=90px>
<header>
<h3>
Art of Photography
</h3>
</header>
<ul>
<li>Photography</li>
<li>History</li>
<li>Samples</li>
<li>About</li>
</ul>
</div>
<div id = "main-heading">Main-heading</div>
<div id = "sub-heading">Sub-heading</div>
<div id = "icons">Icon</div>
<div id = "images">Images</div>
<div id ="contents">Contents</div>
</div>
</body>
</html>
You can also try this solution, u should give your navbar fixed height and change display to flex with align items: center.
https://codepen.io/boutahlilsoufiane/pen/NWbPgra
I have looked at other tutorials on how to make the footer stick to the bottom with css grid when there is little content. But i can't figure it out.
If you could help, that would be great. I'm learning css grid and i've spent days on and off trying to figure it out.
* {
margin: 0;
padding: 0;
color: #ffffff;
font-family: helvetica;
}
body {
background-color: #191919;
}
html body {
height: 100%;
width: 100%;
}
.grid {
min-height: 100%;
display: grid;
grid-template-columns: 10% 40% 40% 10%;
grid-template-rows: 50px 1fr auto;
grid-row-gap: 10px;
grid-template-areas:
"header header header header"
". main main ."
"footer footer footer footer";
}
/*Header*/
.header {
grid-area: header;
background-color: red;
display: grid;
position: fixed;
width: 100%;
grid-template-columns: 40% 60%;
grid-template-areas:
"title navigation"
}
.title {
grid-area: title;
text-align: center;
}
.navigation {
grid-area: navigation;
}
.title .navigation {
}
/*Main*/
.main {
margin-top: 50px;
grid-area: main;
background-color: #323232;
border-radius: 10px;
}
/*Footer*/
.footer {
grid-area: footer;
background-color: black;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Mortrix</title>
</head>
<body>
<div class="grid">
<!-- Header -->
<div class="header">
<div class="title"> <h1>Mortrix</h1></div>
<div class="navigation">Navigation</div>
</div>
<!-- Main -->
<div class="main">
This is some content
</div>
<!-- Footer -->
<div class="footer">Footer
</div>
</div>
</body>
</html>
I know this question have already been asked, but i am looking a for a fix for my own code. Sorry if i missed something obvious.
You can fixed the footer at the bottom of the window simply by using the Viewport Height (vh) . This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height. So here I just set the .grid's min-height: 100vh rather than min-height: 100%
* {
margin: 0;
padding: 0;
color: #ffffff;
font-family: helvetica;
}
body {
background-color: #191919;
}
html body {
height: 100%;
width: 100%;
}
.grid {
min-height: 100vh;
display: grid;
grid-template-columns: 10% 40% 40% 10%;
grid-template-rows: 50px 1fr auto;
grid-row-gap: 10px;
grid-template-areas:
"header header header header"
". main main ."
"footer footer footer footer";
}
/*Header*/
.header {
grid-area: header;
background-color: red;
display: grid;
position: fixed;
width: 100%;
grid-template-columns: 40% 60%;
grid-template-areas:
"title navigation"
}
.title {
grid-area: title;
text-align: center;
}
.navigation {
grid-area: navigation;
}
.title .navigation {
}
/*Main*/
.main {
margin-top: 50px;
grid-area: main;
background-color: #323232;
border-radius: 10px;
}
/*Footer*/
.footer {
grid-area: footer;
background-color: black;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Mortrix</title>
</head>
<body>
<div class="grid">
<!-- Header -->
<div class="header">
<div class="title"> <h1>Mortrix</h1></div>
<div class="navigation">Navigation</div>
</div>
<!-- Main -->
<div class="main">
This is some content
</div>
<!-- Footer -->
<div class="footer">Footer
</div>
</div>
</body>
</html>
It's an old question but here is my solution anyway...
Use css variables for the footer height and header height.
:root {
--header-height: 56px;
--footer-height: 56px;
}
Set the min-height of the main element using the css calc function unit by subtracting the footer and header height from the full viewport height.
main {
min-height: calc(100vh - (var(--footer-height) + var(--header-height)));
}
Super simple solution:
Add the following code to your .footer class:
position:absolute;
bottom:0;
left:0;
right:0;
The full footer class will look like:
.footer {
grid-area: footer;
background-color: black;
position:absolute;
bottom:0;
left:0;
right:0;
}
That is litterally all you have to do!
Here is how it renders:
* {
margin: 0;
padding: 0;
color: #ffffff;
font-family: helvetica;
}
body {
background-color: #191919;
}
html body {
height: 100%;
width: 100%;
}
.grid {
min-height: 100%;
display: grid;
grid-template-columns: 10% 40% 40% 10%;
grid-template-rows: 50px 1fr auto;
grid-row-gap: 10px;
grid-template-areas:
"header header header header"
". main main ."
"footer footer footer footer";
}
/*Header*/
.header {
grid-area: header;
background-color: red;
display: grid;
position: fixed;
width: 100%;
grid-template-columns: 40% 60%;
grid-template-areas:
"title navigation"
}
.title {
grid-area: title;
text-align: center;
}
.navigation {
grid-area: navigation;
}
.title .navigation {
}
/*Main*/
.main {
margin-top: 50px;
grid-area: main;
background-color: #323232;
border-radius: 10px;
}
/*Footer*/
.footer {
grid-area: footer;
background-color: black;
position:absolute;
bottom:0;
left:0;
right:0;
}
<div class="grid">
<!-- Header -->
<div class="header">
<div class="title"> <h1>Mortrix</h1></div>
<div class="navigation">Navigation</div>
</div>
<!-- Main -->
<div class="main">
This is some content
</div>
<!-- Footer -->
<div class="footer">Footer
</div>
</div>
Here's an example with the code below.
CSS
html {
/* min-height on body doesn't work unless it's parent (html) has an explicit height */
height: 100%;
}
body {
/* min-height because content larger than 100% of the view height should scroll */
min-height: 100%;
display: grid;
/* we have 3 rows: header, main and footer. We want the main content to fill the empty space when the content doesn't fill the viewport */
grid-template-rows: auto 1fr auto;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div>
<p>Header</p>
</div>
<div>
<p>Main</p>
</div>
<div>
<p>Footer</p>
</div>
</body>
</html>
See BoltClock's excellent answer for more explanation about height usage with html and body.