I am building a page HERE and I'm having trouble with the footer. I've done a lot of research looking at sticky footers and wrapping everything in containers... and my head is spinning.
The goal of the site is to display the song lyrics on the right as the title is clicked on the left, and it works miraculously well. The problem is that the footer doesn't move with the lyrics...
Your help is much appreciated!
When you used position:absolute for any element then you must add to position:relative their parent element otherwise it not work.
body {
position: relative;
padding-bottom: 50px;
}
Or If you don't want add this in body then just wrap all the divs on one parent div like .wrapper and this css in that.
<div class="wrapper">
<div class="header"></div>
<div class="banner"></div>
<div class="container clearfix"></div>
<footer></footer>
<div>
Also add clearfix class in container div because its have float element
You can fix or make a sticky footer by using CSS or you can just put this CSS for you footer.
.footer-class{
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
}
Position is fixed for footer will never move in any page.
bottom 0 will fixed the footer at the bottom.
left and right 0 will placed the footer in the screen.
Width 100% will show the full width.
z-index will show at the front. Placed everything will behind the footer.
Related
my problem is the following:
I want to put an item directly to the right of a semantic-ui container.
<div class="outer-container">
<div class="ui main container">...</div>
<div class="right-aligned">...</div>
</div>
My outer-container is a footer that is sticky to the page.
.outer-container {
position: sticky;
bottom: 0;
height: 35px;
position: -webkit-sticky;
}
Without having any properties, the right-aligned div is pushed to the far right, but I'd like it to be directly next to the container.
I tried using flexbox but I did not succeed, and I suspect this is due to semantic-ui's container having the property margin-right:auto !important.
I'd be thankful for any pointers.
Setting the css attribute position to sticky causes the element to positioned relative until a certain point is scrolled too at which point it becomes fixed. How can I achieve the reverse i.e the element is fixed until a certain point then becomes relative.
To expand, imagine I have a large footer, 500px in height, which is initially out of the viewport. I want a button which initially falls to the bottom of the page, but, if the footer comes into view then the button should remain above the footer.
To make a element sticky at the top you add this:
element{
position:sticky;
top:0;
}
To make the element sticky at the bottom you need to replace top:0; with bottom:0;
element{
position:sticky;
bottom:0;
}
The trick is to take advantage of the "stickiness" being dependent on the containing block. As MDN puts it:
...at which point it is treated as "stuck" until meeting the opposite edge of its containing block.
So you need the containing block to start where you want the sticky element to start being sticky (in your case, at the top of the page), and to end where you want the sticky element to stop being sticky (in the footer).
It gets a little tricky if you wanted it to get "unstuck" somewhere in the middle of a footer (like I was needing), but it's totally doable. Here's a basic example where I "split" the footer into top and bottom elements to allow the button to appear like it's getting unstuck inside the footer (see at JS Fiddle).
HTML
<div class="sticky-wrapper">
<main>
Scroll down
</main>
<footer class="top">
</footer>
<div class="sticky">
<button>Button</button>
</div>
</div>
<footer class="bottom">
</footer>
CSS
main {
min-height: 200vh;
}
.sticky {
position: sticky;
bottom: 50px;
height: 0;
padding: 0 16px;
}
footer {
background: #808080;
}
footer.top {
height: 16px;
}
footer.bottom {
height: 100px;
}
So I have a div that i want to position at the bottom of my page, with the body of the div completely hidden below the user's viewport, except the entirety of a header which is fixed to the bottom of the page.
Contraints:
The height of the entire div is dynamic, as there can be any number of items in there
The header of the div is contained entirely within the div, syntax-wise
Ideally I'd like to do this completely with CSS, but if a little bit of JavaScript is needed, that's fine too.
Any ideas on how this can be done? position: fixed and bottom: (height of header - height of div) doesn't work because the height of the div changes when you resize the viewport.
Figured it out. Here's my solution. The key is to have a wrapper that is the same height as the header that you want sticking out, and apply position fixed and bottom 0 to that parent wrapper.
html
<html>
<body>
<div class="wrapper">
<div class="wrapper-top">
</div>
<div class="wrapper-bottom">
This can be variable height
<div>
</div>
</body>
</html>
css
.wrapper {
height: 50px;
position: fixed;
bottom: 0;
width: 100%;
}
.wrapper-top {
height: 50px;
width: 100%;
}
I'm trying to design a web page these days that is a bit hard.
I have three main divs. First one for header, another for footer, and third one for main content. Header and footer must be fixed in top and bottom of the page. Their place mustn't change with resizing of browser window. Third div must be in the blank space between those divs. It can resize to fit the page with window resize.
Height of main div must exactly change, because I want to place a Google Maps in that div, so the height of this div is important.
I tried so many things, but they were not successful. Setting height of the div to 100%(while height of body and html is 100%, too) was not the answer. Using a table (with three rows, two rows with fixed height, one row with variable height, with height="100%") had some problems, too(in IE8, when I declared a doctype, the div in second row (with height:100%) didn't fit the cell anymore!).
Now I have no idea to do this work. What can I do?
Note: I prefer not to use CSS3, because compatibility with old browsers is important for me.
You could try something like this.
HTML
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
CSS
#header {
height:50px;
width: 100%;
background: black;
position: fixed;
z-index: 1;
top: 0;
}
#body {
height:100%;
width: 100%;
background: #CCC;
position: absolute;
z-index: 0;
}
#footer {
height: 50px;
width: 100%;
background: #0CF;
position: fixed;
bottom: 0;
}
Here is a fiddle - http://jsfiddle.net/6M59T/
Use a set height for your header, and use sticky footer to keep your footer a set height and aligned to the bottom as well. The space in between should then always be the right height.
You should try the well known Clearfix hack to handle height issues, because you need to "clear" parents elements to get that full 100% height you need.
This is one of the shortcomings of css. You cannot accomplish what you want using just those three divs. You need to use additional divs to offset the height of your header and footer. Here is how to solve this:
<body style="height:100%; margin:0; padding:0;">
<div id="header" style="height:50px; position: relative; z-index: inherit; background-color:lightblue;"></div>
<div id="content" style="height:100%; margin:-50px 0 -70px 0; background-color:wheat">
<div id="header-offset" style="height:50px;"></div>
<div id="footer-offset" style="height:70px;"></div>
</div>
<div id="footer" style="height:70px; background-color:lightblue;"></div>
</body>
I want to attach a sticky element(containing social media icons) to the right of my main wrapper which has a width of 960px and not stuck to the right side of the screen.
Any simple CSS ways of doing this?
Thanks
div#wrapper {
position: relative;
}
div#socialmediaicons {
position: absolute;
top: 0;
right: 0;
}
<div id="wrapper">
<div id="socialmediaicons"> ... </div>
</div>
"Absolutely" positioned elements will be positioned with respect to the closest parent element that is itself positioned.
There is a good jQuery plugin for this very need:
http://plugins.jquery.com/project/stickyfloat
Tt gives you powers beyond mere CSS.