I used the top solution from this question: Stop fixed position at footer to keep a bar fixed until it runs into the footer. And everything is working fine, except for on pages where there is not enough content to scroll. Ideally, I would like the fixed bar to sit on top of the footer on such pages. However, I think I am running into issues with my footer, as it has these styles;
#footer {
position: absolute
bottom: 0
}
I used these styles to keep the footer on the bottom of the pages with very little content. On these pages, my fixed bar is hidden behind my footer.
Here is everything that I have.
CSS
#footer {
width: 100%;
height: 50px;
bottom: 0;
background-color: #D9D9D9; /* light gray */
color: #404040; /* gray */
position: absolute;
}
#fixed {
height: 50px;
position: fixed;
bottom: 0;
background-color: #4B99D3;
}
#fixed-parent {
position: relative;
margin-bottom: 50px;
}
jQuery
$(document).scroll(function() {
checkOffset();
});
function checkOffset() {
if($('#fixed').offset().top + $('#fixed').height() >= $('#footer').offset().top - 10)
$('#fixed').css('position', 'absolute');
if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
$('#fixed').css('position', 'fixed'); // restore when you scroll up
}
HTML
<div id="fixed-parent">
<div id="fixed">
fixed content...
</div>
</div>
<div id="footer">
footer content...
</div>
Example here: http://jsfiddle.net/e5q04cv2/
Related
I am working in a page that has a min-width of 1124px, so each time the browser is smaller than 1124px, the page's content can be scrooled horizontaly, instead of a responsive transition.
http://seluno.jp/
I wonder if I can fix the header only vertically, so when the browser is smaller than 1124px, the header will be scrolled horizontally with the rest of the pages content, but when the page is scrolled vertically, the header is fixed on top.
body {
min-width: 1124px;
}
header {
position: fixed;
}
You can use position: sticky; so it stays fixed on top but allowing horizontal scroll like this:
#header {
position: sticky;
top: 0;
z-index: 1;
}
Example:
body {
min-width: 1124px;
}
#header {
position: sticky;
top: 0;
z-index: 1;
}
/* Just to fill space on screen */
#header {
width: 100%;
height: 100px;
background: linear-gradient(45deg, white, blue);
}
.content {
min-height: 500px;
}
<div id="header">
<h1>Header</h1>
</div>
<div class="content">
<p>Content</p>
</div>
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
How can I have a footer which always stays at the bottom of my page even if this page is too little to fill the entire screen or more ?
I have a button in my page, and when you touch it, it adds thanks to javascript many elements to my page and the page size changed, but my footer doesn't adapt its position.
The problem is when I set the position of my footer to relative, when my page size is too short, he is not at the bottom of my screen, but just under the last element I put on.
I tried position: absolute;, but when the user clicks on the button, my footer stays stuck at his position and it doesn't go to the new bottom of my page.
I don't want my footer to be always visible, but just to be at the real bottom of my page.
Use this:
footer {
position: fixed;
bottom: 0;
/* Add a height and a width! */
}
The complete solution is explained in this article: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Major trick is, that you will have three parts: Header, Body and Footer:
HTML:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px; /* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Height of the footer */
background: #6cf;
}
Use the following
footer {
position: absolute;
bottom: 0;
}
try this one... this will keep your footer at the bottom of your page:
position: fixed;
bottom: 0;
Working demo: https://jsfiddle.net/maky/bgeLbpd9/
#footer {
position: fixed;
bottom: 0;
background-color: black;
min-width: 100%;
font-family: Agency FB;
transition: height 3s;
height: 50px;
}
#footer1 {
text-align: center;
color: #4e4e4e;
}
#footer:hover {
opacity: .8;
color: white;
height: 100px;
}
I have a sticky footer that needs to re-position when the site content grows. Currently when my textarea grows to a certain point, it simply underflows the footer, and that footer is staying as it is.
What is the best way to respond to an element resizing in height? I have seen some stuff using animation frames and such. But all that I want to do is re-calculate the position of my footer each time a resize event is fired.
Ryan Fait's sticky footer:
* {
margin: 0;
}
html,
body {
height: 100%;
}
main {
min-height: 100%;
height: auto !important;
/* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px;
/* the bottom margin is the negative value of the footer's height */
}
footer,
.push {
height: 155px;
/* .push must be the same height as .footer */
}
footer {
height;
155px;
background: gray;
}
textarea {
height: 100px;
width: 200px;
}
<main>
<textarea></textarea>
<div class="push"></div>
</main>
<footer>
</footer>
I have a canvas in my page, and i want it to fill the page until it reaches the bottom of the page.
I have the canvas' width set to 100%, but i cannot set the height to 100% as it extends too far.
The position of the div is not 0,0 of the browser window there are other things above it, so i end up with a scroll bar because 100% height extends well below the bottom of my browser's output.
So i was wondering how can i extend the element's height to reach the bottom of the page from its current position on the web page?
<style>
.canvas{
position:absolute;
width:100%;
height:100%;
}
<style>
<div class="logo">Stuff here</div>
<div class="output">
<canvas class="canvas"></canvas>
</div>
Do i need to use JavaScript or is there a CSS method to doing this?
If you know the height of the content above the canvas, you can use top and bottom properties to take up the rest of the space:
JS Fiddle
.logo {
height: 40px;
}
.output {
position: absolute;
top: 40px; // height of above content
bottom: 0;
width: 100%;
padding: 0;
}
.canvas {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
And if you don't know the height of the above content, you can calculate it:
JQuery Example: JS Fiddle
var height = $('header').height();
$('.output').css('top', height);
this technique is also great when making resizable popups with fixed height headers and footers, but fluid height content
https://jsfiddle.net/ca5tda6e/
set the header (.logo) to a fixed height
.logo{
height: 100px;
background-color: lightGray;
position: relative;
z-index: 1;
}
then position the content (.output) absolute, with a padding-top: 100px
.output{
width: 100%;
height: 100%;
box-sizing: border-box; /* so that padding is included in width/height */
padding-top: 100px; /* padding-top should be equal to .logo height */
position: absolute;
top: 0;
left: 0;
overflow: hidden; /* there was like a pixel of something i couldnt get rid of, could have been white space */
}
I've had this problem before, in CSS, create this rule....
html, body {
margin: 0;
}
I have a problem with sticky footer which has absolute position,
<div class="wrapper">
<div class="content">
<p>Content</p>
</div>
<div class="footer">
Footer
</div>
</div>
body {
height: 100%;
min-height: 100%;
overflow: hidden;
width: 100%
}
.wrapper {
position: absolute;
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
width: 100%;
overflow: auto;
background: blue;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
When I do scroll down my footer also scrolled, when I remove height:100% footer works fine but I need height:100% for my scroll bar for wrapper because I disabled it in body (I need do it). I want to retain height:100% for body and .wrapper but that footer was always at bottom. How can I do it using css ?
i got the same issue, use height: 100vh; i hope works for you!
If you need your footer to always be at the bottom look at this fiddle: http://jsfiddle.net/2n9okg1b/3/
In the fiddle I amd using poition: fixed; in the footer CSS. Fixing the position tells the browser to always keep the elements where you defined them to be.
Update
I have updated the fiddle link. http://jsfiddle.net/2n9okg1b/3/
With this update I detect with jQuery if the footer is below the window. If the footer is below the window I set the footer position to fixed. If the footer is not below the window I set the footer's position to relative. This allows the footer to always be at the bottom of the content or at the bottom of the window.