This question already has answers here:
CSS - Sticky footer [duplicate]
(6 answers)
Closed 6 years ago.
I tried everything now. My footer-bar keeps staying in the middle of the page or fixed on the bottom of the screen. I need it on the bottom of the page, no matter how much content I put on the website.
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: #000000;
}
<div id="footer">
</div>
Use bottom : auto, instead of '0'
#footer {
position: absolute;
right: 0;
bottom: auto;
left: 0;
width:100%;
height:60px;
background:#000000;
}
content <br>Content<br>Content
<div id="footer">
</div>
Related
This question already has answers here:
Why is my element not sticking to the left when using position sticky in css?
(2 answers)
Why isn't position:sticky with left:0 working inside a scrollable container?
(1 answer)
Closed 3 years ago.
I'm trying to make an interface where two parts overlap, and one can scroll through the first part horizontally and the second part vertically. I quickly discovered the css sticky position.
Here is code demonstrating the issue I encountered using position: sticky; :
body {
margin: 0;
}
#d1 {
background: red;
position: sticky;
top: 0;
width: 2000px;
height: 50px;
opacity: 0.8;
}
#d2 {
background: blue;
position: sticky;
left: 0;
width: 50px;
height: 2000px;
opacity: 0.8;
}
<div id="d1"></div>
<div id="d2"></div>
(doesn't work in my browser, here is a jsfiddle https://jsfiddle.net/2bovgy84/1/ )
If you scroll down red div stays on top (what I expect), but if you scroll right blue div gets "stuck" half-way through (but I expect it to behave like the red one does)
I do not understand this behavior, at all.
body needs to be allowed to grow wider than HTML/window's width so it doesn't drag the blue element along with it (backgrounds on html/body shows what happens : https://jsfiddle.net/Lq473pue/1/ ).
you can use for that:
display:inline-block;
display:table;
float:left;
jsfiddle updated : https://jsfiddle.net/Lq473pue/
min-width:100%; can also be handy for body
The body needs the width or you need elements that are not sticky to create that width. Otherwise your body will be the width of the viewport.
https://jsfiddle.net/y9r74c0x/20/
body {
margin: 0;
width: 2000px;
}
#d1 {
background: red;
position: sticky;
bottom: 0;
width: 2000px;
height: 50px;
opacity: 0.8;
}
#d2 {
background: blue;
position: sticky;
right: 0;
width: 50px;
height: 2000px;
opacity: 0.8;
}
<div id="d1"></div>
<div id="d2"></div>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 4 years ago.
I have a fixed header and a fixed footer that should always be visible in the window.
The problem: I would like to have a "main box" expand between the header and the footer. In that main box is the text box the height of that box should be relative to the distance to the header and footer. I think this picture explains better what I'm trying to archive:
The header and footer could also have a fixed height.
<div id="wrapper">
<div id="header"></div>>
<div id="main">
<div id="textbox"></div>
</div>
<div id="footer"></div>
You could add position: fixed for both and position them.
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px; /*height you want*/
z-index: 1;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100px; /*height you want*/
z-index: 1;
}
Then you position your main box using height and padding you wish. It could be something like this:
#main {
position: absolute;
height: calc(100vh - x); /* "x" would be the sum of header and footer heights*/
width: 100%;
top: 100px; /* the height of your header*/
}
#textbox {
margin: 30px 0 20px 0;
width: 100%;
height: calc(100% - 50px);
z-index: 1;
}
with html you can try with </br>
<div id="wrapper">
<div id="header"></div>
</br></br>
<div id="main">
<div id="textbox"></div>
</div>
</br>
<div id="footer"></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 4 years ago.
I have a div class .footer which is my website's footer till now I do not have any content on my webpage so it is on the top of my page after my navigation.
please tell some CSS so I can make my footer at the bottom of my page.
Using position:fixed on footer and setting bottom:0 will position ur footer at the bottom of screen
More about CSS positions here
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background-color: red;
}
<footer>
some content
</footer>
This is the code I used in order to do that:
#footer{
position: absolute;
height: 75px;
bottom: 0;
}
Use
position: fixed;
bottom: 0;
position: fixed; will get the position fixed while scrolling & bottom:0 will keep the element at bottom of window.
.footer{
position: fixed;
bottom: 0;
width:100%;
height:40px;
background-color:red;
}
.header{
width:100%;
height:40px;
background-color:green;
}
<div class="header">
Header
</div>
<div class="footer">
Footer
</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 5 years ago.
So I am making a website like a little mock up one as I have just started learning and the footer just won't stay at the bottom and it is killing me. When I load the page it starts at the bottom and then when I scroll down it stays in the same place and is stuck where it started and won't start at the bottom of the page.
#footer {
text-align: right;
padding: 10px;
background-color: #07889B;
position: absolute;
bottom: 0;
width: 1200px;
}
This should work
#footer {
text-align: right;
padding: 10px;
background-color: #07889B;
position: fixed;
bottom: 0;
left:0;
width: 1200px;//or width:100%;
}
This question already has answers here:
CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
(37 answers)
Closed 8 years ago.
Can anyone help me why the footer is not going to bottom of page?
http://dev.unwaveringmedia.com/billy/
You can see the space after black footer. I don't need that and want the footer be exactly positioned on the bottom of page?
You have many options to deal with this issue.
Option 1
.footer-container{
position:absolute;
bottom:0;
}
Option 2
Use a sticky footer
Option 3
html, body {
padding: 0;
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position:relative;
}
#content {
padding-bottom: 75px; /* This value is the height of your footer */
}
.footer-container {
position: absolute;
width: 100%;
bottom: 0;
height: 75px; /* This value is the height of your footer */
}
You just need some content before the footer (or try one of the other options listed above).
I did this and it fixed it:
Right before the <div class="footer-container">
Enter this html: <div style="min-height:500px;">test</div>
That makes it work normally. So that should show you the problem you have. Either give it a minimum height, or just add your content in there (some lorem ipsem, etc.) or find another way to fix it.
try this
.footer-container {
bottom: 0;
margin: 0 auto;
position: absolute;
width: 100%;
}
You should give .footer-container to bottom:0; and position:absolute to fix footer at bottom.
.footer-container {
bottom: 0;
position: absolute;
}