before I ask the question here are my two constraints:
should work in IE 7+
I can only change the CSS, I can not change the HTML/JS
So, I've got two div's:
<div id="content"></div>
<div id="footer"></div>
"#content" is the content.
"#footer" is a footer which only contains a background image and nothing that is really of value.
Now, how can I hide part of the footer when the page is so long that it scrolls, but display it completely when the page doesn't scroll?
(So far, I have tried stuff like:
#footer {height: 30px; margin-bottom: -20px;}
but that doesn't seem to work...)
here you have a solution only with HTML and CSS:
Source:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
Example:
http://www.cssstickyfooter.com/
Good Luck
Related
The situation: So my website is divided into sections first div inside the body is just a main container then inside of that main container there's 3 div elements first is the header second is the body or content and third is the footer.
The problem: On some browsers or more specifically on any browser on Iphone mobiles or ios. my footer is showing on top of the middle of the body div (content section) but on any other android phone it's looking just fine or on the normal browser..
screenshots:
(normal) on any android device:-
screenshot on any android phone
(problem) on any IOS device:-
screenshot on any ios phone
shared.css file that contains all the css for these pages:-
https://github.com/11abuyaman/majed/blob/master/CODE/CSS/shared.css
link for the page that has the problem:-
https://11abuyaman.github.io/majed/CODE/HTML/About%20us.html
UPDATE:
I'm only using the flex on #clouds_body so I can be able to fit the body right in-between the header and footer and I want the footer to stuck on the bottom even if the body wasn't taking enough space.
please help, thanks in advance.
This is a Safari issue, and you can solve it by removing display: flex on #clouds_body. If you're not using flex-direction: row, it's kind of useless to use flex on it anyways.
I also removed the flex while watching the page on Mac Firefox, and nothing changed.
EDIT
Based on the comment I got.
Change height: 100% to min-height: 100vh in #clouds_body.
This will, however, open up for other issues Safari have with your page, but that's beyond your original question.
html code:
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
css code:
#container{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
}
This will work! This will arrange div's one below the other!
I have this page with a fixed nabber on top (using default bootstrap navbar).
The page holds a menu that includes links to different parts of the page using html anchors. The point is: the scrolling position is not perfect because I have this navbar occupying the first 50px of the page, so after clicking on the html link to anchor, the content is 50px hidden by the navbar.
What I want to do is: that the anchor link consider the first 50px to scroll it perfectly to the content.
Does anyone have an idea of how to fix it?
With Twitter Bootstrap there is a necessity to provide additional spacing when the navbar is fixed.
Underneath(or after, you might say) you'll want to provide the additional spacing required to unsheath the covered content out of mystery and into usefulness.
further reading: http://getbootstrap.com/components/#navbar-fixed-top (they actually recommend a padding-top of 70px to the body element)
You can either place a div that is 50px high over the content you want to scroll to, then anchor to that:
Link
<div id="link" style="height:50px;"></div>
<div class="content">
Content Here...
</div>
JSFiddle Demo
Or, give the content div a padding-top, or margin-top of the height of the nav bar:
Link
<div id="link" class="content">
Content Here...
</div>
CSS:
.content{
padding-top:50px;
}
JSFiddle Demo
I'm in the process of building a mobile website that is targeted towards developing countries, which means that most of the mobile phones will be older feature phones using pretty basic browsers with limited css support and typically no javascript.
One of things I'm trying to achieve is a fixed footer solution that would be supported on older browsers.
Via this site I found a link to this solution Ryan Fait Sticky Footer which seemed good in theory but which I cannot get to work.
Here is my jsfiddle which is my understanding of how the code should be implemented. Would appreciate it if you could have a look and let me know what (if anything) I'm doing wrong
Jsfiddle
Here is my partial code;
HTML Code
<body>
<div class="wrapper">
<p>Text</p>
<div class="push"></div>
<div class="footer">This is a test</div>
</body>
CSS
* {margin: 0;}
html, body {height: 100%;}
.wrapper {min-height: 100%;height: auto !important;height: 100%;margin: 0 auto -155px;}
.footer, .push {height: 155px;}
You've not closed the wrapper DIV. Close this before the footer. See the new fiddle.
http://jsfiddle.net/sF4EB/3/
Be aware, this won't stick the footer to the bottom of the window at all times (you need to use position: fixed for that), just at the bottom of the window if the page isn't tall enough to push it there, otherwise it will remain at the bottom of the content.
I am working on this page here for a client of mine http://sw6.us/scott/index.html
Notice the site is all based within a div, the problem is the scroll bar that is produced because the text is to long. I have edited my CSS and changed "overflow" to hidden instead of auto but this just makes the text run off the screen and you can not scroll at all.
Here is my refined HTML code
<div class="main">
<div class="blk">
....
</div>
<div class="navbar">
....
</div>
<div class="programs">
.....
</div>
<div class="blk2">
...
</div>
</div>
</body>
</html>
The site is built out of the .main div
How can I make that scroll bar appear at the far right of the browser and scroll the .main div?
If this is not possible how can I achieve this exact look with a set up that will place the scrollbar on the right edge of the browser? The reason I am doing it like this is because the client want's the site looking exactly like his .pdf mock up.
Thanks!
If you want to scroll the main div change the CSS as follows...
html, body { overflow: hidden; }
div.main { overflow: auto; }
You should also set some bottom margin to leave some space for the shadow at the bottom...
Maybe posting the PDF would help better understand for me...
try this:
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll;></div>
And if you want to hide horizontal scroll: overflow-x:hidden ;
A horizontal scroll bar appeared on my website and the page is now wider than it was. The last thing I remember doing was adding a widget (to link a pic to another website) to the right sidebar of my page. I removed the widget but the horizontal bar still remained at the bottom of the page and the webpage is still too wide. Can you please help me in getting the page back to normal horizontal dimensions and without a horizontal scroll bar. thanks
here is the website
www.runningnurse.com
In your footer you have a div with inline CSS:
position:relative;left: 119px;
That's exactly how much the site is scrolling. An alternate style for that effect which would remove the scroll bar is this:
padding-left:119px; overflow:hidden;
The problem is in the footer, it's too wide because the div child element of the ul (ul elements are only supposed to have li as their child elements!) is positioned to the left.
You have this HTML at the bottom of the page:
<div id="footer">
<ul class="footer-links">
<div style="position:relative;left: 119px; "></div>
</ul>
Use this instead:
<div id="footer">
<ul class="footer-links" style="margin-left: 133px;">
<div>...</div>
</ul>
Also the fact that the HTML contains a lot of errors might give implications when viewing in in different browsers.
The problem has to do with your footer:
add #footer{width:947px} and it gets rid of the horizontal scrollbar for me.
As #j08691 Suggested, Use overflow:hidden and your problem would be solved.
One easy way would be to hide the overflow on the body tag.
body {
overflow-x: hidden;
}
Use overflow-x