I'm using bootstrap in conjunction with Shiny and R. But this doesn't really matter, because Shiny just uses a normal bootstrap installation.
So my footer is coded like this:
/* Sticky Footer */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 40px;
}
.footer {
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 40px;
background-color: #f5f5f5;
}
/* End Sticky Footer
And basically it works nicely. What doesn't work is the resizing I guess after all content is loaded. Since R computes a lot in the background even after the HTML code etc. is loaded, the size of the page usually gets quite bigger after loading. But then my sticky footer overlaps the content and I have been struggling with this now all day and haven't found a solution yet. Any ideas?
<body>
<div id="wrapper">
<div id="main-content">
</div>
<footer>
</footer>
</div>
</body>
CSS:
body,html {
height: 100%;
}
body {
min-height: 100%;
}
#wrapper {
height: 100%;
position: relative;
}
#main-content {
background-color: red;
height: 1000px;
width: 100%;
}
footer {
clear: both;
position: static;
bottom: 0;
height: 40px;
width: 100%;
background-color: blue;
}
Example: https://jsfiddle.net/a5xtu95z/
I don't have much experience with bootstrap but I can't see why this wont work?
Please try this reference link for the Sticky footer layout
http://getbootstrap.com/examples/sticky-footer-navbar/
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Related
i made a simple html-page using bootstrap (only navbar and footer). Now the site is scrollable ... why?
https://www.checkmobility.de
Heres my Footer CSS:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px; /* Set the fixed height of the footer here */
line-height: 50px; /* Vertically center the text there */
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
Thanks :)
Because of using line-height in the footer, it's causing an overflow. Use overflow:auto to fix it...
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px; /* Set the fixed height of the footer here */
line-height: 50px; /* Vertically center the text there */
background-color: #f5f5f5;
overflow: auto;
}
https://www.codeply.com/go/PvhX4Z7ZYx
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
Background: On small screens when the keypad is up and the footer sits on its top then it covers the input fields in the content area.
Here are the requirements (some borrowed from [here][1]):
The footer should be visible if the content above it is shorter than the user’s viewport height.
If the content is taller than the user’s viewport height, then the footer should disappear from view and rest at the bottom of the page, as it would naturally.
This must be done without JavaScript
The header must be fixed at the top
The most important part is only the content can have a scroll-bar if necessary
It has to work on Android 4.x, IOS >=7.1 WebView, WP8.1 Web Browser element
This is how I make the content scrollable now while putting the footer to the bottom.
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#wrapper {
min-height: 100%;
position: fixed;
}
header {
height: 72px;
background-color: red;
}
#content {
overflow: auto;
border-bottom: 1px solid red;
margin-bottom: 50px;
}
footer {
height: 50px;
background-color: black;
position: absolute;
bottom: 0;
top:auto;
left:0px;
width:100%;
}
Update1
This is what I could come up with so far.
http://jsfiddle.net/gfqew5un/3/
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#wrapper {
min-height: 100%;
position: fixed;
}
header {
height: 72px;
background-color: red;
}
#content {
overflow: auto;
border-bottom: 1px solid red;
margin-bottom: 50px;
}
footer {
height: 50px;
background-color: black;
position: absolute;
bottom: 0;
top:auto;
left:0px;
width:100%;
}
It's close to my final goal but the problem with this solution comes up when the content is longer than the viewport. In that case the footer goes out of the screen but I want it to stay at the bottom while the content gets a scroll-bar and stretches till the top of the footer. So a hard coded max-height on content won't work. I need something more dynamic.
You should use position:relative to make sure the footers position is right under the content.
if you use max-height to your content div in combination with overflow: auto the scrollbar appears.
This is the CSS code:
header{
height: 72px;
background-color: red;
position: relative;
left: 0px;
right:0px;
overflow: visible;
}
#content{
overflow:auto;
position: relative;
max-height:200px;
}
footer{
height: 50px;
background-color: black;
position: relative;
}
Link to JSFiddle
You can easily achieve this effect using flex option from CSS3.
HTML:
<header>
<h1>Your header</h1>
</header>
<div id="content-wrapper">
<div id="content">
Lorem ipsum dolor
</div>
<footer>
footer content
</footer>
</div>
CSS:
html {
height: 100%
}
body {
display: flex;
flex-direction: column;
height: 100%;
}
#content-wrapper {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
}
#content {
flex: 1;
}
footer {
height: 35px;
padding-top: 20px;
}
https://jsfiddle.net/puybgmps/
I have read all the tutorials on how to make the footer at the bottom of the webpage but still i'm unable to do it for my site.
The links i have referred are
How do you get the footer to stay at the bottom of a Web page?
Making my footer stick to bottom of the page
Ways to stick footer to the bottom a page
making the footer stick the bottom
None of it worked..!
CSS
#footer1 {
clear: both;
background-color: #333;
width: 1200px;
min-width: 100%;
width: 100%;
bottom: 0;
position: relative;
height: 50px;
border-top:5px solid #1b9bff;
}
Here is the dummy fiddle of my site
Fiddle
This is the fiddle i have tried but there is a bug in it too
http://jsfiddle.net/andresilich/fVpp2/1/
Try this:
<div id="container">
<div id="content"></div>
</div>
<div id="footer">My Sticky Footer</div>
CSS:
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content { padding-bottom: 3em; }
Add/Edit as following
#body {
margin-bottom: 85px;
position: relative;
}
#footer1 {
position: fixed;
}
I guess this is what you want
* html #form1 {
height:100%;
}
#form1 {
min-height: 100%;
position: relative;
}
#body {
padding-bottom: 50px; /* padding-bottom should be equal to the footer height (this keeps the footer from overlapping the content) */
}
#footer1 {
position: absolute;
width: 100%;
clear: both;
bottom: 0;
padding: 0;
margin: 0;
}
Following the code of this method - you need to to:
1) Place your footer outside the form
2) Add height: 100% on form
3) Set negative bottom margin to form according to the height of the footer.
form {
min-height: 100%;
height: 100%;
margin: 0 auto -150px; /*footer 150px high */
}
Modified Fiddle
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