I have fixed footer DIV and content DIV. Footer DIV is fixed so it is visible all time. Content DIV is 100% height, but it touches footer DIV and crosses it to the end. I want it just to end when footer begins.
<div id="footer">
</div>
<div id="content">
</div>
Here is a jsFiddle link: http://jsfiddle.net/MXMWe/3/
Problem: Content DIV (with its text) goes over footer.
Note 1: Footer has to be visible all time no matter where you scroll (possibly fixed.
Note 2: Scrollbars have to be normal as it is when you first load browser. No changes there.
Here is an image telling what I want to achieve:
I will give more info if asked.
Thanks a lot.
I updated the jsfiddle:
http://jsfiddle.net/MXMWe/4/
A few things:
I added a <div id="footer-padding></div> before the closing div in #content. Then in the css added height:120px; (the same height as the #footer ) - This allows the content text to not be stuck at the bottom of the site, but instead the very top of the footer.
I removed the opacity that was on the footer because if you have the opacity it effects the entire div - AKA the text from the content div would be visible behind it since it's transparent.
I added a z-index: 2 to the #footer to ensure it is above the #content at all times.
If you're going to have an opacity/transparency as the background of the footer you will see anything it's above, behind it.
Have you tried using the CSS Sticky Footer?
Related
This seems to me currently like the quadrature of the circle, but nevertheless I try to ask this question here.
I need the following:
header - 100% width, fixed at top
content - fixed width, vertically scrolling content
footer - same width as content, fixed at bottom
scrollbar - scrolling horizontally simultaneously content and footer
I.e. there should be only one horizontal scrollbar at the bottom which scrolls content and footer simultaneously, but no scrollbar between content and footer. The vertical scrollbar should only affect the content.
(of course, the horizontal scrollbar should be auto, i.e. only appear if content/footer width is larger than the current viewport width)
The closest I have arrived at is the following HTML/CSS:
<!doctype html>
<html>
<head>
<title>scroll attempt</title>
</head>
<body style="overflow-x:hidden;height:100vh;margin:0;">
<div style="height:100vh;display:flex;flex-direction:column;">
<div style="width:100%;height:100px;background-color:red;">header</div>
<div style="display:flex;flex-direction:column;height:100%;overflow-x:auto;overflow-y:hidden;">
<!--
the following div should only have a vertical scrollbar,
hence overflow-x:visible; - which is not respected
when setting overflow-x:hidden; the horizontal scrollbar disappears
but then the vertical scrollbar moves when scrolling horizontally
-->
<div style="flex:1;background-color:yellow;overflow-x:visible;overflow-y:auto;">
<div style="width:1200px;height:800px;background-color:orange;">scrolling</div>
</div>
<div style="width:1200px;height:100px;background-color:green;">footer</div>
</div>
</div>
</body>
</html>
Unfortunately, with this HTML/CSS, an unwanted scrollbar appears on the div surrounding the inner content, which is located between content and footer, although overflow-x:visible; was set. When setting overflow-x:hidden; the scrollbar is gone, but then the vertical scrollbar is also scrolled by the horizontal scrollbar at the bottom instead of staying on the right of the page.
The behavior is mostly consistend in current IE/FF/Chrome versions. I also have a Javascipt version that fixes divs on window resize and on vertical scroll, but this flickers horribly in IE, which is why I'd prefer a pure CSS solution.
Here's a jsfiddle: http://jsfiddle.net/nftqjkyq/
Any ideas?
[edit: added more details about wanted behavior of the scrollbars]
<div style="width:100%;height:100px;background-color:green;">footer</div>
change the width of your footer to 100% if you want to remove the second scroll bar on your fiddle
Solved fiddle
http://jsfiddle.net/nftqjkyq/1/
EDIT
Try this one http://jsfiddle.net/nftqjkyq/4/
EDIT
With Sticky Footer that scrolls on overflow (This is impossible to scroll a fixed element using just css)
Here is a solution that could be closer to what you want.....maybe it can just give you the direction.
Try this fiddle: http://jsfiddle.net/nftqjkyq/10/
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 trying to make an our team page using bootstrap but I can't get the footer to act right. At first it was not filling the width of the page, now (I'm not so sure what I did) this problem is solved but it is overlapping onto the content: some thumnails, writing, and a link. The page with the problem is: http://rdtaxsavers.com/new/OurTeam.php
My css file is at rdtaxsavers.com/new/css/bootstrap.css
You'll notice that the rdtaxsavers.com site footer works fine. Thanks in advance!
EDIT: I got it back to where the footer is not overlapping but now the width issue is back. You will see in my css that my modal-footer class has width:100%; at the end of it but this does not fix the issue.
EDIT: This is driving me nuts. When I fix the width problem then it overlaps, when I fix the overlap the width is broken.
I think you are placing the footer inside the Container class, the container class has a width of 1170px. therefore the footer will not be 100% width to the body. move the footer out of container class. or you have to change the width of container class.
this is what you have:
<div class="container">
<div class="row">...</div>
<footer>...</footer>
</div>
try to do this:
<div class="container">
<div class="row">...</div>
</div>
<footer>...</footer>
Try clearing the float:left in the ul.thumbnails element.
I'm trying to position div as a footer inside parent div.
<div>
...some content...
<div id='footer'>
<span style='float:left'>Left text</span>
<span style='float:right'>Right text</span>
</div>
</div>
Now left and right elements are ok, but the footer div does not align to the bottom of the containing div, but to the bottom of its content.
But if i try putting position:absolute for the footer, it looses grasp on the parent's div width and thus left and right spans go one right after the other.
http://jsfiddle.net/ch4Hw/
Use position:relative; on the container and position:absolute; bottom:0; height:auto; on footer.
What you're looking for is (I think) a sticky footer. See here for a good technique: http://ryanfait.com/sticky-footer/
If you are still looking, I achieved what I think you are after here:
http://www.facebookanswers.co.uk/code/fullheight/demo2.htm
Its a self contained file, IE all the CSS is there with the markup, so you should be able to see what is going on.
The full article is here:
http://facebookanswers.co.uk/?p=312
What that gives you is a header, two columns and a footer.
One column is used for navigation, the other for the main content. The footer goes at the bottom of the main column. If the content is less than a full screen, the footer remains at the bottom of the screen. However, once you get more content than screen, it will scroll with the rest of the data.
how would you make a footer container follow directly after the content and then stretch to the bottom of the page?
The setup is:
header-container is fixed 150px height
content-container stretches with whatever content should be inside
footer-container follows stretches for the remainder of the page.
So far I either have the footer directly after content with white space following, or a footer stuck to the bottom with white space between the content and the footer
The actual styling can vary depending on whether you are sure your page will never by long enough to scroll. You can often use the body tag itself for this trick, but it is less flexible and not recommended.
The idea here is to create a very long footer div, and have it be contained by the element which contains the rest of your content. Since the overflow of the parent is hidden, the actual length of the div will be ignored.
This is often shown with a counter-balancing bottom padding, but in your case that shouldn't be needed.
<style>
html,body,.bigDiv{height:100%}
.header{height:150px}
.footer{height:2000px; background-color:green;}
</style>
<div class="bigDiv" style="overflow:hidden;">
<div class="header"></div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>