Thanks to a good answer here, and a superb one here, I've got most of the layout I'm aiming for. Sticky, fixed height header and footer, body in the middle - centered and at a fixed aspect ratio.
The only thing not working is that the body pushes the footer off the bottom, so that it's no longer sticky. (run snippet, scroll down to see the not-sticky-anymore footer).
The only way I've been able to affect this is by limiting the height of the #parent div, for example, to 80vh. This ends up leaving space above the footer depending on the vh.
Is there a way to do just this layout below, except keep the footer on the page?
I found a pertinent similar question here on SO, but alas, unanswered.
* { margin: 0; box-sizing: border-box; }
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
header {
background-color: #cffac7;
height: 50px;
}
main {
background-color: #55086d;
}
footer {
background-color: #fceec7;
height: 50px;
margin-top: auto;
}
#parent {
width: 100vw;
height: 100vh;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.ar-box {
max-width: 100%;
max-height: 100%;
background-color: #0bf;
aspect-ratio: 3/5;
}
.ar-box:after {
display: block;
content: "";
min-width: 100vw;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
<header>header :-)</header>
<main>
<div id="parent">
<div class="ar-box">body :-)</div>
</div>
</main>
<footer>footer :-(</footer>
</body>
</html>
Here's a suggestion, using the "aspect ratio box" as a centered position absolute element, inside a flex: 1; parent
* {
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header,
footer {
background-color: #cffac7;
height: 50px;
}
#parent {
background-color: red;
position: relative;
flex: 1;
}
#aspectRatio {
background-color: #0bf;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
aspect-ratio: 3 / 5;
}
<header>HEADER</header>
<main id="parent">
<section id="aspectRatio">Aspect 3/5</section>
</main>
<footer>FOOTER</footer>
There is a way to do this by setting the elements to be position:fixed.
I was able to achieve this, albeit not using flexbox styling, but nonetheless:
<body>
<header/>
<main/>
<footer/>
</body>
------------------------
header {
position: fixed;
z-index: 1;
height: 50px;
}
main {
position: fixed;
top: 50px;
height: calc(100% - 100px); <-- total height of header/footer
}
footer {
position: fixed;
z-index: 1;
top: calc(100% - 50px);
height: 50px;
}
Related
the trashcan moves up when scrolling down and it doesnt span over the full width of the parent div
I want it to be like this:
.ParentDiv {
background: red;
overflow-y: scroll;
border: none;
float: left;
position: relative;
height: 80px;
width: 200px;
}
#DivAroundTrashcan{
position:fixed;
bottom: 0;
width: 100%;
height: 15px;
}
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="ParentDiv" id="ParentDiv" >
<p1><center>efgf </center></p1>
<p2><center>wefwf </center></p2>
<p3><center>wefwef </center></p3>
<p4><center>wefwef </center></p4>
<p5><center>wefwef </center></p5>
<p6><center>wefweff </center></p6>
<p7><center>wefwef</center></p7>
<p8><center>wefwef </center></p8>
<div id="DivAroundTrashcan"><input type="button"id="Trashcan"value="🗑"></div>
</div>
</body>
</html>
position:absolute;
just makes it stay where it is, but when scrolling it doesnt stay in place
You can use flex on your container:
html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
/*following is for demo only - not sure what gives your container height */
height: 100%;
}
.scroll {
flex-grow: 1;
overflow: auto;
}
.bin {
text-align: right;
}
<div class="container">
<div class="scroll">
content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div class="bin">bottom bin content</div>
</div>
put position: fixed on the container div of the trashcan, rather than absolute.
#DivAroundTrashcan{
position: fixed;
right: 0;
bottom: 0;
left: 0;
text-align: right;
}
I am trying to attach a div to the bottom of the page. This page is not scrollable, but I cannot set top by pixel because it needs to be responsive to screen size. All I want is a div at the bottom of the page that takes up 100% of the horizontal space and 20% of the vertical space.
What I've tried:
Making parent relative and child absolute.
Setting parent's min-height: 100%
Here is my code:
<html>
<head>
<title>Forget It</title>
<link rel="stylesheet" href="../static/styles.css">
</head>
<body>
<div class='parent'>
<div class='ground'></div>
</div>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #96b4ff;
}
.parent {
position: relative;
min-height: 100%;
}
.ground {
position: absolute;
height: 20%;
bottom: 0;
background-color: #2cb84b;
}
Any ideas? Thanks!
Just apply width: 100%; to .ground to make the div take full width.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #96b4ff;
}
.parent {
position: relative;
min-height: 100%;
}
.ground {
position: absolute;
height: 20%;
width: 100%;
bottom: 0;
background-color: #2cb84b;
}
<div class='parent'>
<div class='ground'>footer</div>
</div>
I can't find a solution to this issue. I would like to have a footer that's always at the bottom (not sticky/fixed), and also a background that's always at the bottom (not sticky/fixed).
I made a picture to make it more clear: https://i.imgur.com/qVLb1bl.png
<html>
<div id="container">
<div class="content">
<h1>Content</h1>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div>
</html>
CSS:
html, body { height: 100%; }
body { display: flex; flex-direction: column; background: url('http://www.freetoursbyfoot.com/wp-content/uploads/2013/08/New-York-Skyline-Downdown-view.jpg') no-repeat bottom center; }
#container { display: flex; flex-direction: column; height: 100%; }
.content { max-width: 800px; width: 100%; height: 400px; margin: 0 auto; background: #eee; margin-top: 20px; text-align: center; padding-top: 30px; }
.footer { max-width: 800px; width: 100%; height: 100px; background: #000; margin: auto auto 0 auto; }
I also made a codepen: https://codepen.io/nickm10/pen/XVJjGb
Anyone know the solution?
Thanks!
Since you are already using flexbox layout. There is something called as flex-grow (The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container).
Just give:
.content{
-webkit-flex-grow: 1;
flex-grow: 1;
/** remove height **/
}
and remove height from .content.
Specify the decire height of the html page. Else the page is high enough to fit all of ur element;
html, body { height: 1000px; }
Use min-height: 100%; for html and body instead of height: 100%;
Updated answer:
html height should be set as min-height so it can grow when needed. But thanks to this body does not know the theight of parent (html) element and so we can't use % based min-height there anymore.
Thankfully we have viewport units. So for body set min-height: 100vh; This tells body to be minimally 100% of viewports height.
html { min-height: 100%; }
body { min-height: 100vh; margin: 0; }
PS! You also need to remove margin from body with this solution. Or there will be a scrollbar visible always.
Put background in body pseudo element and align it there.
body {
...
position: relative;
min-height: 100%;
...
}
body::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: url("http://www.freetoursbyfoot.com/wp-content/uploads/2013/08/New-York-Skyline-Downdown-view.jpg")
no-repeat bottom center;
pointer-events: none;
z-index: -1;
}
Here is a codepen: codepen.io/anon/pen/vpEgxo
Hope this will help ;)
I'm having some issues with min-height: 100%
I want the footer always below my content. Meaning, if the content is longer than the screen height, you don't see the footer, until you've scrolled all the way to the bottom
Also, when the content is shorter than the screen height, the footer needs to be at the bottom of the screen. Well, I thought I solved this just by adding min-height: 100%
<html>
<head>
<style>
html, body, main { min-height: 100% }
</style>
</head>
<body>
<main>
<article> .... </article>
<footer> ... </footer>
</main>
</body>
</htm>
DEMO
Now, for some reason the body tag seems to ignore this setting and its height simply fits the content.
Unfortunately, you can't just set the body to 100% ( DEMO )
Any suggestions how to fix this ?
Sticky footer 'hack' is usually done with the min-height and negative margin-bottom on the footer parent element. All parent elements up until root html, need to have height:100%;
article{
//height: calc(100% - 50px);
min-height: 100%;
background: yellow;
padding-bottom: 50px;
margin-bottom:-50px;
}
JSFIDDLE LONG CONTENT
JSFIDDLE SHORT CONTENT
The fantastic CSS Tricks website has, in their Snippets area a snippet for a Sticky Footer:
http://css-tricks.com/snippets/css/sticky-footer/
Or using jQuery:
http://css-tricks.com/snippets/jquery/jquery-sticky-footer/
latest link with demo
Or you can simply use Modern Clean CSS “Sticky Footer” from James Dean
So just change your HTML and CSS to this:
HTML
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<main>
<article> .... </article>
</main>
<footer> ... </footer>
</body>
</html>
CSS
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Demo here
You can use display:flex for this:
html,
body {
padding: 0;
margin: 0;
height: 100%
}
main {
min-height:100%;
display: flex;
flex-direction: column;
background:blue;
}
article {
flex-grow: 1;
background:green;
}
footer {
background:orange;
}
<main>
<article>... </article>
<footer> ... </footer>
</main>
I modified your css to put the footer and the article in a relative position:
* {
margin: 0;
box-sizing: border-box;
padding: 0;
}
article {
height: calc(100% - 50px);
position: relative;
}
main {
background-color:lightgray;
}
footer {
background-color: green;
height: 50px;
position: relative;
bottom: 0;
width: 100%;
}
the fiddle:
http://jsfiddle.net/np9n4ckb/5/
If you don't want to mess with positioning, you can use vh units.
1vh equals 1% of the viewport's height.
(For reference, this is a good read: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/)
Fiddle: http://jsfiddle.net/np9n4ckb/6/
CSS
* {
margin: 0;
box-sizing: border-box;
padding: 0;
}
html, body {
min-height: 100vh; /* Minimum height is the full viewport */
}
article {
min-height: calc(100vh - 50px); /* Minimum height is the viewport height minus the footer */
}
main {
background-color:lightgray;
}
footer {
background-color: green;
height: 50px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* browser reset */
html {
height: 100%;
position: relative;
min-height: 100%: padding-bottom: 50px;
/* equal to footer height */
}
body {
height: 100%;
color: #fff;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 50px;
background: #ccc;
}
header {
background: #333;
}
main {
background: tomato;
}
<html>
<body>
<header>Menu</header>
<main>content of unknown height!!</main>
<footer>footer always stays at bottom</footer>
</body>
</html>
This is just what you need to do.
I need to have the wrapper div element to be full height and so adjust its height depending on the whole height of the page so no scrollbars are displayed.
My html:
<header>
I am the header and my height is fixed to 40px.
</header>
<div id="wrapper">
I am the wrapper
</div>
My css:
html,body {
height: 100%;
background: blue;
margin: 0;
padding: 0;
}
header {
height: 40px; <-------- this value is fixed
background-color: green;
}
#wrapper {
height: 90%;
background-color: red;
}
I know the height: 90% on the wrapper is wrong but I don't know what to do.
Here is the jsFiddle: https://jsfiddle.net/3putthcv/1/
You can use CSS calc():
#wrapper {
height: calc(100% - 40px); /* 40px is the header value */
background-color: red;
}
JSFiddle
Or display:table/table-row:
html,
body {
height: 100%;
width: 100%;
background: blue;
margin: 0;
padding: 0;
}
body {
display: table;
width: 100%;
}
header {
display: table-row;
height: 40px;
background-color: green;
}
#wrapper {
display: table-row;
height: 100%;
background-color: red;
}
<header>I am the header and my height is fixed to 40px.</header>
<div id="wrapper">I am the wrapper</div>
JSFiddle
What about setting the size based on the top, left, right and bottom like this (demo) (full disclosure, it won't work if the content is too large):
#wrapper {
background-color: red;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 40px;
}