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.
Related
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>
This question already has answers here:
CSS 100% height with padding/margin
(15 answers)
100% width minus margin and padding [duplicate]
(6 answers)
Closed 1 year ago.
I've got a grid layout. I want to add a 5px margin all around it but doing so adds a scrollbar.
Is it possible to set a margin without having a scrollbar added?
function toggle() {
document.querySelector(".container").classList.toggle("withMargin");
}
html,
body,
.container {
height: 100%;
margin: 0;
}
.container {
display: grid;
grid-template-rows: 50px 1fr 1fr;
grid-template-columns: 300px 1fr 1fr;
gap: 5px 5px;
grid-auto-flow: row;
grid-template-areas: "logo header header" "nav-one main main" "nav-two main main";
background-color: black;
}
.main {
grid-area: main;
background-color: lightcoral;
}
.logo {
grid-area: logo;
background-color: lightcyan;
}
.header {
grid-area: header;
background-color: lightgoldenrodyellow;
}
.nav-one {
grid-area: nav-one;
background-color: lightgray;
}
.nav-two {
grid-area: nav-two;
background-color: lightgreen;
}
.container.withMargin {
margin: 5px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="main">
<br /><button onclick="toggle()">toggle .container margin</button>
</div>
<div class="logo">logo</div>
<div class="header">header</div>
<div class="nav-one">nav one</div>
<div class="nav-two">nav two</div>
</div>
</body>
</html>
Use padding instead of margin for selector .container.withMargin:
.container.withMargin {
padding: 5px;
}
And add box-sizing: border-box for the .container selector.
function toggle() {
document.querySelector(".container").classList.toggle("withMargin");
}
html,
body,
.container {
height: 100%;
margin: 0;
}
.container {
display: grid;
grid-template-rows: 50px 1fr 1fr;
grid-template-columns: 300px 1fr 1fr;
gap: 5px 5px;
grid-auto-flow: row;
grid-template-areas: "logo header header" "nav-one main main" "nav-two main main";
background-color: black;
box-sizing: border-box;
}
.main {
grid-area: main;
background-color: lightcoral;
}
.logo {
grid-area: logo;
background-color: lightcyan;
}
.header {
grid-area: header;
background-color: lightgoldenrodyellow;
}
.nav-one {
grid-area: nav-one;
background-color: lightgray;
}
.nav-two {
grid-area: nav-two;
background-color: lightgreen;
}
.container.withMargin {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div class="container">
<div class="main">
<br />
<button onclick="toggle()">toggle .container margin</button>
</div>
<div class="logo">logo</div>
<div class="header">header</div>
<div class="nav-one">nav one</div>
<div class="nav-two">nav two</div>
</div>
</body>
</html>
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 a grid with a header, nav, content, footer, and space for ads on the side. I am trying to color code each area for now so I can visually see what I am doing and I can't seem to get the header to change color. Every other section is being changed just fine. Not only can I not change the background of the section, but I can't change the text color, or change anything it seems. Thanks for all of the help and here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style>
* {
font-family: Arial;
box-sizing: border-box;
}
body {
margin: 0;
}
#grid-container {
background-color: lightgray;
display: grid;
grid-template-columns: 15% 42.5% 42.5%;
grid-template-rows: 20% 15% 45% 20%;
grid-template-areas:
"header header header"
"nav nav nav"
"advert content content"
"advert footer footer";
}
#header {
background-color: yellow;
grid-area: header;
}
#nav {
background-color: purple;
grid-area: nav;
}
#content {
background-color: blue;
grid-area: content;
}
#advert {
background-color: green;
grid-area: advert;
}
#footer {
background-color: red;
grid-area: footer;
}
</style>
</head>
<body>
<div id="grid-container">
<head id="header">
header
</head>
<nav id="nav">
nav
</nav>
<main id="content">
content
</main>
<aside id="advert">
advert
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</aside>
<footer id="footer">
footer
</footer>
</div>
</body>
</html>
You are using an <head> when you probably meant to use <header>.
I'm trying to align the image in the main grid area at the bottom of main (sticky) instead of at the top. So when the viewport height expands there has to be more space above the image.
I tried to make main position relative and img position absolute with bottom 0 but then the image will overflow the header area.
This is the current HTML and CSS code:
#media screen and (max-width: 576px) and (orientation:portrait) {
html,
body {
height: 100%;
}
body {
margin: 0;
}
body {
display: grid;
grid-gap: 0px;
height: 100%;
grid-template-columns: 1fr;
grid-template-areas: "nav" "main" "footer";
grid-template-rows: 112px 1fr 50px;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
nav {
background-image: url('images/header_xs.png');
background-repeat: no-repeat;
}
main {
background-color: #ddf4fb;
}
footer {
background-image: url('images/footer_xs.png');
background-repeat: no-repeat;
}
.logo1_xs {
margin-top: 40px;
margin-left: 60px;
}
.logo2_xs {
margin-top: 10px;
margin-left: 60px;
}
.coastrunner1_xs {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<img class="logo1_xs" src="images/logo1_xs.png" />
<img class="logo2_xs" src="images/logo2_xs.png" />
</nav>
<main>
<img class="coastrunner1_xs" src="images/coastrunner1_xs.png" />
</main>
<footer>
</footer>
</body>
</html>
I have done it with the following css style:
main {
display: flex;
flex-direction: column;
}
.flex_space {
flex: 1;
}
And added an empty div:
<main>
<div class="flex_space"></div>
<img class="coastrunner1_xs" src="images/coastrunner1_xs.png" />
</main>
Does somebody have a better solution?