I have a problem, my English is not good, but I try to describe my problem completely!
There is currently a window. The screen to be implemented is that the footer should be fixed at the bottom of the container, and should not move down as the content of the white block increases. Then, when the content of the white block is too much, the entire window will not change. Large, and the white block content can be scrolled to view other options.
My example
What I could understand, you need to fix footer.You just need to uncomment your commented code of footer and change position:fixed Or position: sticky; from position: absolute
i.e Your footer code of CSS would be;
footer{
position: fixed;
//position: sticky;
width: 100%;
bottom:0px;
right:0px;
background-color: #f77331;
display: flex;
justify-content:space-around;
padding:10px;
z-index:9000;
.btn{
padding:10px;
border-radius:20px;
}
}
Then if your content hides due to fixed position of footer you can use margin for that content.Hope this would solve your problem.
Related
code: https://jsfiddle.net/Nemoko/m8vLprb6/11/
problem:
I try to put the footer to the bottom of the page. because when I have to scroll down(when I have a lot of content in the page) the footer is in the way: but when I dont have to scroll. the footer is perfectly in place
how do I fix this?
what I tried:
adding position:relative; in the body
this however hides the footer somehow at the top of the page and margin-top does not work setting position:relative; in the footer shows it again, however than it somehow sticks to the top of the page
adding display:flex; flex-direction:column; min-height:100vh; in the body
this makes the footer appear again
I see your problem - the solution is this change both the body and footer position to relative - also change flex-direction:row not sure why you had it as column, experimenting i assume, i also added a flexbox property to space around your content. justify-content:space-around;
what i recommend further is reading this pages when you get a change, will help you with positioning and use of div/ boxes a bit better.
but in simple terms position:absolute doesn't move.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm also pretty new - so i understand where you at bro.
.content {
left: 96px;
top:200px;
width: 1728px;
position: relative;
background-color: #0fa1cb;
opacity: 0.9;
color: #FFFFFF;
}
.footer{
left: 96px;
bottom: 0;
width: 1728px;
position: relative;
display: flex;
background: linear-gradient(#0fa1cb,#000046);
opacity: 0.9;
flex-direction: row;
justify-content:space-around;
It looks like your biggest issue is that you are using absolute positioning on your content and footer sections. Setting position:absolute on an element removes it from the document flow. You would have a much easier time removing the absolute positioning from the content section and then setting position:relative on the Body element. I have always found it to be a best practice to use absolute positioning sparingly, and definitely not for large content sections that may contain an arbitrary amount of content.
My problem is that I have a web page with a footer. I would like the page to extend the footer to the bottom of the browser window if there is not enough content to fill the entire page. I would also like the footer to go to the very bottom of the page when the content exceeds the height of the browser and there is a vertical scroll bar.
For some reason I cannot get this to work, I followed the tutorial on this page: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
and the tutorial specifically says it does what I want-
"On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn’t always taking up precious reading space."
When I follow the tutorial it successfully puts the footer on the bottom of the page when there is not enough content to fill the page, but when there is more than enough content the footer is prematurely placed where the browser window initially ends because the body's and the everything container's heights are set to the height of the window as opposed to the height of the entire page (height of page with with scrolling).
the div organization is as follows:
<div class="everything">
<div class="main_content"></div>
<div class="template_footer"></div>
</div>
My CSS code:
html, body {
margin:0;
padding:0;
height:100%;
}
.everything{ //main container
width:100%;
min-width:960px;
max-width:1450px;
margin-left:auto;
margin-right:auto;
min-height:100%;
position:relative;
}
.main_content{ //body container
width:100%;
position:relative;
float:left;
}
.template_footer{
width:100%;
height:44px;
background-color:rgba(0, 0, 0, .5);
position:absolute;
bottom:0;
}
I've also tried a bunch of different variations with height and nothing works correctly, I've searched through other questions and they don't seem to answer this problem specifically.
The footer is absolute positioned to the bottom of the .everything container.
So no matter the content, the footer will be covering the bottom 44 pixels of your container.
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.main {
padding-bottom: 60px;
}
.footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 60px;
}
the main section padding-bottom should be bigger than the height of the footer. The footer section has to be position absolute. The whole page should be min-height 100%.
I am having an issue with the horizontal line I have placed in my footer. I have another on my header but it is working fine. The issue begun when I stuck the footer to the bottom of the page. The horizontal line displays all the way across the screen rather than just in the container.
CSS :
footer {
text-align:center;
clear:both;
color:#B05510;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
#mcp {
width:175px;
-webkit-transition: width .5s;
margin:10px;
}
#mcp:hover {
transition: width .5s;
width:225px;
}
HTML:
<footer>
<hr>
<p>Copyright © sourceblockmc.net 2014 - All Rights Reserved<br>
<a href='https://clients.mcprohosting.com/aff.php?aff=8566'><img id='mcp'
src='images/mcp.png'</a></p>
</footer>
Issue pic : http://gyazo.com/3aeede809cffb0b6cc748b5ddf2efe8a
Although I don't recommend using Absolute Positioning for your footer. Here is the solution with your code. Position absolute breaks elements out of the documents normal flow.
The solution here makes the footer 75% same as the container, and then recentering it, with margin-left and margin-right.
footer {
text-align: center;
clear: both;
color: #B05510;
width: 75%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
The problem is the following bit from your CSS file:
footer {
...
width:100%;
...
}
This is causing your footer block to stretch across the entire width of the screen. Since the text is centered, you aren't able to tell, but if the text was longer, it would also extend beyond the boundaries of the grey section.
Simply change the width setting to the pixel width of the grey background (or smaller if you want some padding) and your problem will be solved. Assuming, for example, it's 950 pixels:
footer {
...
width:950px;
...
}
Edit
Since you're also using absolute positioning, you may have issues centering the footer after making this change. View this question for a possible solution: How to center absolutely positioned element in div? or don't use position: absolute and add margin: 0 auto; to align the footer in the horizontal center.
So i have a navbar on the left of my website it works fine, but it wont "push" the footer like normal data does
#navbar {
float:left;
width: 181px;
position: fixed;
height: 100%;
}
#footer {
border-top:2px solid #a1a1a1;
position:absolute;
bottom:0;
width:100%;
color:white;
height:60px; /* Height of the footer */
background-color: #101010;
}
this is the css, you can see a "working" version at:
version - no data
version - with data
with the second link you will notice how the main content pushes the data, but on the first one if you have a small screen or make the window small it wont show all of the nav bar, is there a way to fix this?
i believe i have covered everything
If I understand your issue correctly, when the page is resized vertically you want the footer to stop when it reaches the navbar.
One possible solution is to modify .navbar css like below:
#navbar {
// remove these styles
// float: left;
// position: fixed;
// height: 100%;
width: 181px; // keep this
}
To get the footer to rest at the bottom of the nav, you need to get the .navbar back into the document flow, float: and position: fixed take it out of the document flow.
You still may want to make this float:left for part of your design, in which case you'll need something else to extend down to stop the footer (probably something in the content section).
On my website: http://www.thetechnodaily.com the footer on homepage is fine because of a lot of content. But on pages with small content such as about page its not at bottom of page. The footer is at the end of content rather than bottom of page. Is there any way I can make the footer always stay at bottom?
yea you can use sticky footer
<div id="footer"></div>
#footer
{
position: relative;
margin-top: -50px; /* Give the height of footer as negative margin */
height: 50px;
clear:both;
}
This link may help you
http://www.cssstickyfooter.com/using-sticky-footer-code.html
If you are referring to having a fixed footer which always shows at the bottom you will need to use fixed position bottom: 0px so it will always stay there even if the content does not fill up the screen
#footer_id {
position:fixed;
bottom:0px;
height: "whatever";
}