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?
Related
Here my page layout, the image should vertically fit into the first row:
<div id="main">
<div id="header" class="vcenter">
<img src="https://source.unsplash.com/random/200x200" id="logo">
</div>
<div id="e1"></div>
</div>
css:
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #001018;
}
#main {
display: grid;
grid-template-columns: 200px;
grid-template-rows: 100px auto;
grid-template-areas:
"header"
"e1";
gap: 20px;
}
#header { grid-area: header; }
#e1 { grid-area: e1; }
#main > div {
background-color: #334455;
padding: 5px;
}
#logo {
max-width: auto;
max-height: 80%;
border: 1px solid red;
}
.vcenter {
display: grid;
align-items: center;
}
Firefox successfully centers the image after resizing but Chrome shifts the image down, like so:
Is there a simple way to make this compatible in both browsers with minimal changes to the css/html, keeping the current grid layout?
Thank you!
https://jsfiddle.net/tfoller/pnmjvq58/32/
There is not enough height. Add height: 100% to #logo. Like that:
#logo {
...
height: 100%;
}
This will work in both browsers.
I need to setup the following DIV structure (See image below. It tells more than a 1000 words)
The structure consists of 2 colums. The main column (left) has a variable width and 100% height.
The right colums has a FIXED width of 380px and 100% height.
Then inside the right column I need 3 DIVS.
The top DIV has a fixed height of 200px and must be aligned to the top.
The bottom DIV has a fixed height of 150px and must be aligned to the bottom.
The middle DIV has a variable height and must fill up the space vertically.
This is the DIV setup And the CSS I have:
.main-content {
width: 100%;
padding: 0px;
}
.col-1 {
width: calc(100% - 380px);
min-height: calc(var(--vh, 1vh)*100);
background-color: #2693FF;
float: left;
}
.col-2 {
width: 380px;
min-height: calc(var(--vh, 1vh)*100);
float: right;
}
.col-2-top {
height: 200px;
background-color: #00B200;
}
.col-2-middle {
height: 100%;
background-color: #FF8000;
}
.col-2-bottom {
height: 100px;
background-color: #B25900;
}
<div class="main-content">
<div class="col-1"></div>
<div class="col-2">
<div class="col-2-top"></div>
<div class="col-2-middle"></div>
<div class="col-2-bottom"></div>
</div>
</div>
Then... Column 1 and 2 should stack when the viewport width becomes less than 768px.
Column 1 on top and Column 2 below it.
Like this:
I think I'm almost there, but I'm having problems with the height of the Main DIV and the heights and aligning of the DIV col-2 middle DIV. I also need a bit helpt to get these divs stack nicely above each each other.
I would suggest that you use grid layout instead of floating around your <div>s, grid layout allows you to structure your layout and separate them in columns and rows, and areas using grid-template-areas.
for max-width:748 just add media query, here is how it might be implemented:
body {
padding: 0;
margin: 0;
}
.main-content {
display: grid;
background-color: #2196F3;
grid-template-areas:
'main fixed-top'
'main variable-mid-area'
'main fixed-bottom';
background-color: #2196F3;
height: 100vh;
grid-template-columns: 1fr 380px;
grid-template-rows: 200px 1fr 150px;
}
.main-content > div {
color: #fff;
font-size: 30px;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
}
.main {
grid-area: main;
background-color: #2693FC;
}
.variable-mid-area {
grid-area: variable-mid-area;
background-color: #FF8015;
}
.fixed-top {
grid-area: fixed-top;
background-color:#00B21F;
}
.fixed-bottom {
grid-area: fixed-bottom;
background-color: #B2590B;
}
#media only screen and (max-width: 768px) {
.main-content {
grid-template-areas:
'main'
'fixed-top'
'variable-mid-area'
'fixed-bottom';
grid-template-rows: 300px 200px 1fr 150px;
grid-template-columns: 100%;
height: auto;
}
}
<div class="main-content">
<div class="main"> main </div>
<div class="fixed-top"> 200 </div>
<div class="variable-mid-area"> auto </div>
<div class="fixed-bottom"> 150 </div>
</div>
If you have any questions how the css works, feel free to ask them in the comments.
I know the background-colors are irrelevant but they help to visualize it.
.container {
min-width: 768px;
width: 100%;
display: grid;
grid-template-columns: calc(100% - 380px) 1fr;
min-height: 100vh;
}
.col1 {
background-color: dodgerblue;
}
.col2 {
display: flex;
flex-direction: column;
}
.col2-row1 {
height: 200px;
background-color: orange;
}
.col2-row2 {
background-color: forestgreen;
height: 100%;
}
.col2-row3 {
height: 150px;
background-color: red;
}
#media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
<div class="container">
<div class="col1">1</div>
<div class="col2">
<div class="col2-row1">2</div>
<div class="col2-row2">3</div>
<div class="col2-row3">4</div>
</div>
</div>
How to make side parts of web page reduce they width with reducing width of whole page by degrees?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
display: grid;
grid-template-columns: 10% 80% 10%;
min-height: 100vh;
}
.side-right {
background: red;
}
.side-left {
background: blue;
}
.main {
background: green;
}
#media screen and (max-width: 1000px) {
.container {
grid-template-columns: 0 100% 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="side-right">
</div>
<div class="main">
</div>
<div class="side-left">
</div>
</div>
</body>
</html>
In example below after max-width = 1000px side elements are dissapearing instantly, but I want to make them reducing they width reacting by every pixel changed on max-width. How to make it?
If I understand your requirement correctly...change the initial grid-template-columns to
grid-template-columns: 1fr minmax(1000px, 8fr) 1fr;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.container {
display: grid;
grid-template-columns: 1fr minmax(1000px, 8fr) 1fr;
min-height: 100vh;
}
.side-right {
background: red;
}
.side-left {
background: blue;
}
.main {
background: green;
}
#media screen and (max-width: 1000px) {
.container {
grid-template-columns: 0 1fr 0;
}
}
<div class="container">
<div class="side-right">
</div>
<div class="main">
</div>
<div class="side-left">
</div>
</div>
You can animate all with flex-box and just by changing some of your css.
.container {
display: flex;
min-height: 100vh;
flex-direction: row-reverse;
}
.side-right {
background: red;
width: 100%;
}
.side-left {
background: blue;
width: 100%;
}
.main {
background: green;
min-width: 600px;
}
Thats just a basic example. Consider reading more about flex-box.
Try to add min-with: 50px; to .side-right and .side-left
And then give them both an z-index: 1;
So they wont lay under your main
Hope that helps
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.
I have a grid layout with two columns and two rows. A sticky left nav, a sticky header, and content that will live in the bottom right corner of the grid.
What I have now is nearly there, but I would like the .content div to use scroll when content extends beyond the screen. I thought I would be able to just use overflow: auto, but that isn't working. Is what I have close?
body {
margin: 0;
overflow: hidden;
}
.page {
display: grid;
grid-template-rows: 55px auto;
grid-template-columns: 20vh auto;
grid-template-areas: "nav header" "nav content";
}
.nav {
grid-area: nav;
background-color: blue;
}
.header {
grid-area: header;
background-color: grey;
}
.content {
grid-area: content;
height: 1000px; // This is dynamic
background-color: red;
}
<div class="page">
<div class="nav">Side nav</div>
<div class="header">Header</div>
<div class="content">
<h1>title</h1>
</div>
<div>
JS fiddle
For overflow: auto to work (i.e., for scrollbars to render) browsers need a trigger. This trigger is usually a height / width limitation that forces an overflow condition, which launches the scrollbars.
Trigger conditions vary among browsers. They also vary among CSS technologies, such as flex, grid and block layouts.
In this particular case, there are several logical places to establish an overflow condition, but none of them work.
You could target the grid item, as you have tried:
.content {
height: 1000px
overflow: auto;
}
But it doesn't work. No scrollbar appears on the fluid item.
body {
margin: 0;
/* overflow: hidden; */
}
.page {
display: grid;
grid-template-rows: 55px auto;
grid-template-columns: 20vh auto;
grid-template-areas: "nav header"
"nav content";
}
.nav {
grid-area: nav;
background-color: aqua;
}
.header {
grid-area: header;
background-color: lightgrey;
}
.content {
grid-area: content;
height: 1000px;
overflow: auto;
background-color: red;
}
<div class="page">
<div class="nav">Side nav</div>
<div class="header">Header</div>
<div class="content">
<h1>title</h1>
</div>
<div>
You could target the row itself, as I tested:
.page {
display: grid;
grid-template-rows: 55px 1000px;
}
.content {
overflow: auto;
}
But that doesn't work either. Still no scrollbar on the fluid item.
body {
margin: 0;
/* overflow: hidden; */
}
.page {
display: grid;
grid-template-rows: 55px 1000px;
grid-template-columns: 20vh auto;
grid-template-areas:
"nav header"
"nav content";
}
.nav {
grid-area: nav;
background-color: aqua;
}
.header {
grid-area: header;
background-color: lightgrey;
}
.content {
overflow: auto;
grid-area: content;
background-color: red;
}
<div class="page">
<div class="nav">Side nav</div>
<div class="header">Header</div>
<div class="content">
<h1>title</h1>
</div>
<div>
So I targeted a child of the grid item. DING DING DING! That worked.
No need for fixed positioning. No need for sticky positioning. This works across all browsers that support Grid Layout.
body {
margin: 0;
}
.page {
display: grid;
grid-template-rows: 55px calc(100vh - 55px); /* height limitation on second row */
grid-template-columns: 20vh auto;
grid-template-areas: "nav header"
"nav content";
}
.nav {
grid-area: nav;
background-color: aqua;
}
.header {
grid-area: header;
background-color: lightgrey;
}
.content {
grid-area: content;
background-color: red;
overflow: auto; /* overflow condition on parent */
}
article {
height: 1000px; /* height set on child; triggers scroll */
}
<div class="page">
<div class="nav">Side nav</div>
<div class="header">Header</div>
<div class="content">
<article><!-- new section for content -->
<h1>title</h1>
</article>
</div>
<div>
jsFiddle demo
Browser support is not 100%, but what about actually using sticky instead of fixed positioning? (now tested in Chrome) You won't have to deal with hard-coded margins.
One of the issues you'll still have to deal with, what to do when the content in your sidebar (.nav > div) Is higher than your viewport.
body {
margin: 0;
}
.page {
display: grid;
grid-template-rows: 55px auto;
grid-template-columns: 3.5rem auto;
grid-template-areas: "nav header" "nav content";
}
.nav {
grid-area: nav;
background-color: blue;
}
.nav > div {
position: sticky;
top: 0;
}
.header {
grid-area: header;
background-color: grey;
position: sticky;
top: 0;
min-height: 3.5rem;
}
.content {
grid-area: content;
min-height: 1000px;
background-color: red;
}
<div class="page">
<div class="nav">
<div>Side nav</div>
</div>
<div class="header">Header</div>
<div class="content">
<h1>title</h1>
</div>
<div>
I have included the change log to see where the code needs to be change in order to get an understanding. Also the full code snippet is available below. Hope this is what you expect.
Change log
*Remove body { overflow: hidden; }
*Change .page { grid-template-columns: 3.5rem auto; }
*Added
.nav { position: fixed;
top: 0;
bottom:0;}
*Added
.header { position: fixed;
margin-left: 3.5rem;
width: 100%;
height: 3.5rem; }
Full Code
body {
margin: 0;
}
.page {
display: grid;
grid-template-rows: 55px auto;
grid-template-columns: 3.5rem auto;
grid-template-areas:
"nav header"
"nav content";
}
.nav {
position: fixed;
top: 0;
bottom:0;
grid-area: nav;
background-color: blue;
}
.header {
grid-area: header;
background-color: grey;
position: fixed;
margin-left: 3.5rem;
width: 100%;
height: 3.5rem;
}
.content {
grid-area: content;
height: 1000px;
background-color: red;
}
<div class="page">
<div class="nav">Side nav</div>
<div class="header">Header</div>
<div class="content">
<h1>title</h1>
</div>
<div>