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 ;)
Related
Here is the link to codesandbox where I am trying to add a footer but the content above it gets hidden. How can I fix this? What is the mistake I am doing?
The footer component is commented in the app.js file. Scroll to the bottom and see the content and if you uncomment the footer, it will hide the content.
https://codesandbox.io/s/rk4kl
The main problem is using the position property in the wrong place.
the position property is good especially when you're considering boxes.
in your styles.css
.App {
font-family: sans-serif;
height: 100%;
position: relative;
}
.footer {
position: absolute;
min-height: 2rem;
width: 100%;
text-align: center;
bottom: 0;
}
.flex {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
}
change it into
.App {
font-family: sans-serif;
min-height: 100vh;
}
.footer {
min-height: 2vh;
width: 100%;
text-align: center;
}
.flex {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
min-height: 90vh;
}
Explanation:
The main idea is that for keeping the footer always have to split the viewport into separate ratios. So that they can always stay with that ratio irrespective of the content.
here the div with className App have a min-height of 100vh, which means when we split the viewport into 100 pieces div with App occupies a minimum of 100 slices. Now inside App, we have the flex and footer. We give flex a minimum of 90 pieces and a footer of a minimum of 2. so the footer will always keep in the bottom now.
here is the updated result
I think you are searching for some "Sticky Footer" Solutions, if your Content is not long enough, the footer should be at the end of the page.
You could give a margin-top - footer height.
html, body {
height: 100%;
margin: 0;
}
.content {
background-color: blue;
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
background-color: yellow;
height: 50px;
margin-top: -50px;
}
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer">Here comes the Footer</footer>
</body>
Just change position: absolute; to position: relative;
.footer {
position: relative;
min-height: 2rem;
width: 100%;
text-align: center;
bottom: 0;
}
Use from position static instead absolute for .footer.
When you use position: absolute for an element, it may be placed over other elements. because:
Absolute positioned elements are removed from the normal flow and can overlap elements.
From: https://www.w3schools.com/css/css_positioning.asp
Just remove position "absolute" or add position "relative" to it.
.footer {
position: relative;
min-height: 2rem;
width: 100%;
text-align: center;
bottom: 0;
}
I have a simple HTML document with a height of 100vh. The element contains a title. Now when I scroll nothing happens as expected. What I need is an effect that the page stays the same and my title is scrolling up and out of the viewport. How can I achieve that?
My code simplified:
html,
body {
margin: 0;
padding: 0;
}
#wrapper {
background-color: red;
height: 100vh;
width: 100%;
}
h1 {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<h1>Title</h1>
</div>
You can do it the opposite way - not fixing the to-be-scrolled element, but the contents element which you put into the background by using a negative z-index:
Apply position:fixed to the wrapper and move it to the background with z-index: -1. Erase position: absolute from the h1 to reset its position to static to allow it to scroll.
For the scrolling to be possible, you either need enough height for the title element (at least 150% or more), or another (possibly invisible) element that follows afterwards, like in my example below.
The text centering inside h1 can be done via flex (see below).
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
position: fixed;
z-index: -1;
background-color: red;
height: 100vh;
width: 100%;
}
h1 {
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin: 0;
}
.something_else {
height: 100%;
}
<div id="wrapper"> wrapper contents here... </div>
<h1>Title</h1>
<div class="something_else"></div>
First of all, please read this whole question so you can fully understand what i am looking for, Thanks!
This is a question i have been trying to research for a great time now, and has stumped me for quit a while. Can i have a true sticky footer with a fixed header?
How can i implement a sticky footer with a fixed header? I can't add padding or a margin to the body or content, since that will break the footer. Also, i want to be able to use width:100% and height: 100% inside my content without it overflowing and creating a mess.
Here is what i am aiming for (Please excuse my great Photoshop skills) :
This look good, when i use position:fixed; and bottom:0; on my footer. But to make it truly sticky, i need to add some css to my page. (from : http://css-tricks.com/snippets/css/sticky-footer/)
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}
This allows me to have a GREAT looking sticky footer, but here is the problem. Some of the content is underneath my fixed navigation bar.
I can't add padding or a margin to the body, html, OR the content, because that will make the sticky footer mess up. Is there any way i can do this without CSS "Hacks"?
This is with the content under the header: http://jsfiddle.net/g2ydV/3/
Looks good right!, but some of the content is hidden under the header? Lets fix that by adding a margin to the content: http://jsfiddle.net/g2ydV/2/
The above example works, BUT the footer is messed up. How can i achieve this effect without messing up my sticky footer?
One potential solution is to swap your content:after to content:before.
Working Demo
CSS:
/* .content:after {
content: "";
display: block;
} */
.content:before {
content: "";
display: block;
height: 45px;
}
There's an alternative way of doing this using display: table; and display: table-cell which seems to be becoming increasingly popular.
I'm just offering it up as an alternative worth having a look at. It's quite clean and doesn't require any defined heights for the header and footer which is nice.
HTML
<div id="wrap">
<div id="wrap-inner">
<div class="navbar">
<span>Fixed Header (content under here)</span>
</div>
<div class="content">
<p>Content Here ... part of this is under the header, i need to see all of it without messing up the sticky footer</p>
</div>
<div class="footer">
<span>Sticky footer!</span>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
body {
margin: 0;
}
#wrap {
display: table;
width: 100%;
height: 100%;
min-height: 100%;
}
#wrap-inner {
vertical-align: middle; /* optional for positioning content in the middle */
display: table-cell;
}
.navbar, .footer {
position: fixed;
width: 100%;
}
.navbar {
top: 0;
width: 100%;
}
.footer {
bottom: 0;
}
Demo
it's my decision for fixed header
html {
position: relative;
min-height: 100%;
}
#main-container {
padding-top: 55px; /* this is header height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
body {
margin: 0;
padding:0;
line-height: normal;
height: 100%;
overflow: hidden;
}
.header {
background:#3d5084;
padding: 16px 0 16px 30px;
display: flex;
align-items: center;
justify-content: center;
}
.main-middle-container {
padding: 30px;
display: flex;
align-items: center;
justify-content: flex-start;
height: calc(100vh - 150px);
flex-direction: column;
overflow: hidden;
overflow-y: auto;
background: #f1f1f1;
}
.footer {
background: #3d5084;
padding: 11px 25px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
position: relative;
z-index: 1;
}
Demo link
I have a modal dialog for a workflow that displays content roughly of a fixed height, but also displays an embedded PDF for a user to review.
I'd like to maximize the height of the PDF for the user's screen size, so the dialog scales vertically, but I can't get the PDF to fill all the remaining space within the dialog's div.
Here is the Html:
<div class="container">
<div class="popUp">
<div class="popUpHeader">Header</div>
<div class="fixedContent">Fixed Height Content</div>
<div class="resizeableContent">I should fill all the free vertical space in .popUp</div>
<div class="popUpFooter">Footer</div>
</div>
</div>
and CSS I'm using:
body, html {
margin: 0;
height: 100%;
}
.container {
height: 100%;
min-height: 100%;
background: #F8F8FF;
}
.popUp {
background: lightgrey;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 90%;
}
.popUpHeader {
width: 100%;
background: darkgrey;
text-align: center;
}
.popUpFooter {
width:100%;
background:darkgrey;
text-align:center;
position: absolute;
bottom: 0;
}
.fixedContent {
height: 10em;
text-align: center;
background: #E1E1EE;
}
.resizeableContent {
background: #7d7f7c;
text-align: center;
width: 100% height: 100%;
}
JsFiddle: http://jsfiddle.net/trainman1124/pnbeoyb9/2/
Here is an image of the desired result:
Edit
Here is a sample JsFiddle using an embedded PDF, which is what actually needs to be done.
http://jsfiddle.net/trainman1124/pnbeoyb9/3/
Note, I've corrected the missing semicolon in the example and also added overflow:hidden
You could use the display: table; and display: table-row properties in order to fill the space.
Set the .container to fill 100% of the page and .popUp div to display: table; and fill it's parent.
Display all the children as display: table-row;, and then set heights for the popUpHeader and popUpFooter divs.
Allow your resizableContent div to fill the remaining space:
.resizeableContent {
background: #7d7f7c;
width: 100% height: 100%;
display: table-row;
}
Check out this CodePen
Modify Popup class to make its color same as resiseableContent
.popUp {
background: #7d7f7c; /* Modified here */
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 90%;
overflow: hidden;
}
Depending on what browsers you need to support (This wont work earlier than IE9), one solution would be to use calc and vh units.
Something like:
.popUp {
background: lightgrey;
margin: auto;
height: calc(100vh - 10em); /* Height of viewport minus your .fixedContent div, you may also want to include the height of the header */
overflow: hidden;
}
The updated fiddle has the heights set to % instead. That works as you want I think?
Update
http://jsfiddle.net/batcave/pnbeoyb9/7/
.popUpFooter {
width:100%;
background:darkgrey;
text-align:center;
position: absolute;
bottom: 0;
height: 7%;
}
.resizeableContent {
background: #7d7f7c;
text-align: center;
width: 100%;
height: 80%;
}
.fixedContent {
height: 10%;
text-align: center;
background: #E1E1EE;
}
First of all, please read this whole question so you can fully understand what i am looking for, Thanks!
This is a question i have been trying to research for a great time now, and has stumped me for quit a while. Can i have a true sticky footer with a fixed header?
How can i implement a sticky footer with a fixed header? I can't add padding or a margin to the body or content, since that will break the footer. Also, i want to be able to use width:100% and height: 100% inside my content without it overflowing and creating a mess.
Here is what i am aiming for (Please excuse my great Photoshop skills) :
This look good, when i use position:fixed; and bottom:0; on my footer. But to make it truly sticky, i need to add some css to my page. (from : http://css-tricks.com/snippets/css/sticky-footer/)
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}
This allows me to have a GREAT looking sticky footer, but here is the problem. Some of the content is underneath my fixed navigation bar.
I can't add padding or a margin to the body, html, OR the content, because that will make the sticky footer mess up. Is there any way i can do this without CSS "Hacks"?
This is with the content under the header: http://jsfiddle.net/g2ydV/3/
Looks good right!, but some of the content is hidden under the header? Lets fix that by adding a margin to the content: http://jsfiddle.net/g2ydV/2/
The above example works, BUT the footer is messed up. How can i achieve this effect without messing up my sticky footer?
One potential solution is to swap your content:after to content:before.
Working Demo
CSS:
/* .content:after {
content: "";
display: block;
} */
.content:before {
content: "";
display: block;
height: 45px;
}
There's an alternative way of doing this using display: table; and display: table-cell which seems to be becoming increasingly popular.
I'm just offering it up as an alternative worth having a look at. It's quite clean and doesn't require any defined heights for the header and footer which is nice.
HTML
<div id="wrap">
<div id="wrap-inner">
<div class="navbar">
<span>Fixed Header (content under here)</span>
</div>
<div class="content">
<p>Content Here ... part of this is under the header, i need to see all of it without messing up the sticky footer</p>
</div>
<div class="footer">
<span>Sticky footer!</span>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
body {
margin: 0;
}
#wrap {
display: table;
width: 100%;
height: 100%;
min-height: 100%;
}
#wrap-inner {
vertical-align: middle; /* optional for positioning content in the middle */
display: table-cell;
}
.navbar, .footer {
position: fixed;
width: 100%;
}
.navbar {
top: 0;
width: 100%;
}
.footer {
bottom: 0;
}
Demo
it's my decision for fixed header
html {
position: relative;
min-height: 100%;
}
#main-container {
padding-top: 55px; /* this is header height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
body {
margin: 0;
padding:0;
line-height: normal;
height: 100%;
overflow: hidden;
}
.header {
background:#3d5084;
padding: 16px 0 16px 30px;
display: flex;
align-items: center;
justify-content: center;
}
.main-middle-container {
padding: 30px;
display: flex;
align-items: center;
justify-content: flex-start;
height: calc(100vh - 150px);
flex-direction: column;
overflow: hidden;
overflow-y: auto;
background: #f1f1f1;
}
.footer {
background: #3d5084;
padding: 11px 25px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
position: relative;
z-index: 1;
}
Demo link