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
Related
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'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;
}
Is there any way to make a page with header, sticky footer and the body should always fit 100% of the screen height - header and footer, with only HTML and CSS. See the image for more.
You can use an approach which allows you to keep the body at 100% height and have a sticky footer as well using a modern sticky footer approach:
http://mystrd.at/modern-clean-css-sticky-footer/
Steps to achieve this:
1. box-sizing:border-box;
2. html { position: relative; height: 100%;}
3. body{ text-align: center; min-height: 100%; margin: 0; overflow: hidden;}
4. container: absolute positioned with a top of the header height.
5. footer: absolute positioned with left and bottom:0;
Look at this demo:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
position: relative;
height: 100%;
}
body {
text-align:center;
min-height: 100%;
margin:0;
overflow:hidden;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 50px; /* Height of Footer */
width: 100%;
}
header {
height: 50px; /* Height of header */
line-height:50px; /* vertical align the title*/
width: 100%;
background-color:lightgreen;
}
.container{
background-color: darkgreen;
height: 100%;
position: absolute;
top: 50px; /* Height of header */
left: 0;
bottom: 0;
width: 100%;
right: 0;
}
footer{
background-color:yellow;
line-height:50px; /* vertical align the title*/
}
<header>HEADER</header>
<div class="container"></div>
<footer>FOOTER</footer>
Inspecting you will see that the body will always be 100% height and the footer will be sticky at the bottom.
Ps. Added box-sizing: border-box just because it's a good practice but it's not necessary for this approach.
If you're using a container in the body after the header then you should set your css like this:
.container {width: 100%; height: 100%; content: "" ;}
Add this to your css
html, body {
height: 100%;
}
And make a div, that has the content you called body, then give it 100% in height.
For an example
<header>..</header>
<section id="content"> <--- HAS 100% IN HEIGHT.
....content
</section>
<footer>..</footer>
Like this:
#content {
width: 960px; <-- definable.
height: 100%;
}
I have a common page structure with fixed header and a sticky footer. But I can't get around how to extend the div heights to fill the full window area.
HTML
<header>
header header header
</header>
<div id="page">
<div id="left">side bar side bar</div>
<div id="right">
<p>I want to draw the brown dashed line all the way down to the footer even when the #right content is too little to fill the window.</p>
<p>I know that I have to set height 100% on #right so that it stretches to fill the green box. But, the green box itself does not stretch to the bottom despite height 100% because the yellow box does not have explicit height defined.</p>
<p>What can I do?</p>
</div>
</div>
<footer>
footer footer footer
</footer>
CSS
html, body, foot, header, div { padding: 0; margin: 0; box-sizing: border-box; }
p { margin-top: 0 }
html { height: 100%; min-height: 100%; }
header { position: fixed; background-color: red; height: 50px; width: 100%; }
footer { position: absolute; bottom: 0; width: 100%; background-color: cyan; }
body {
position:relative; /* container for footer */
border: 5px solid yellow;
min-height: 100%; /* not explicitly setting height to allow footer to be pushed downwards */
}
#page {
padding: 60px 0 20px 0;
border: 5px solid green;
height: 100%; /* not working: how to extend page all the way to the bottom, min-height = fill the window? */
}
#page:after { content:""; display: block; clear:both; }
#left { float: left; width: 100px; }
#right {
margin-left: 100px;
padding-left: 10px;
/* objective: to create vertical divider between #right and #left that extends to the footer */
height: 100%;
border-left: 5px dashed brown;
}
OK, the reason why height 100% is not working its because body does not have a height at all, its height depends of the items inside body.
There is a work around for this
Apply the following to your styles.
html, html body {
height: 100%;
}
#page { /* If #page is a lvl 1 child of body, this should work */
height: 100%;
}
Here is the JSFiddle
http://jsfiddle.net/wetjyLy3/1/
You can use absolute positioning to make the divs always 0px away from the top and bottom of the window. You may need to play around with the values, but something like this should work:
#left { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; }
#right { position: absolute; top: 0; bottom: 0; right: 0; width: 80%; }
Edit: Here's a fiddle that shows how this could work.
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