I have a basic website with a header, content area and footer. I'm trying to create a sticky footer so when there is little content, the footer still stays at the bottom of the page. For some reason, when there is a lot of content, it just overflows beyond the browser and no scroll bar appears.
Here is the page in question:
http://swif.co/msb/page.html
I used many tutorials to get it working but the latest one I used was http://css-tricks.com/snippets/css/sticky-footer/.
remove overflow:hidden from the body
Related
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
I am trying to create a layout that has a fixed header that always shows at the top. Additionally a side bar that will have a scroll bar next to it if the content goes past the browser height. Same with the content to the right of the side-bar, I would like it to have its own scroll bar that does not go past the browser height.
Please see this site for an example of what I am looking for. It has all 3 features.
I have tried so many things. Without the fixed header I can get it working by simply making everything height: 100%. But with the fixed header something is going on where the sidebar and content pane scroll bars go way below the browser view.
I feel like I am getting somewhere when I add padding-bottom: 64px; to the items I want to have the scroll bar. The 64px is the height of the header.
Please go through the documentation and tutorial of Bootstrap and you will be able to do it.
For reference go through this JSFiddle: https://jsfiddle.net/jxo6pmju/12/
link = https://jsfiddle.net/jxo6pmju/12/
For scrollbar go through this : https://jsfiddle.net/vrzjLc77/1/
link = https://jsfiddle.net/vrzjLc77/1/
I've been going mad trying to fix the responsiveness issue on a site I'm working on, and I can't find any solutions here or anywhere else. The main problem is my fixed footer. On the landing page of the site, there's a header, main area, and footer (the page expands when arrow clicked on, but that's irrelevant).
I've attached the footer to the bottom of the page using fixed positioning. When the screen width is >1024px, the header, main, and footer widths are 100%. Below 1024px, the header and footer widths become static (with 1024 as the static width).
The problem is, there comes a point where the footer should be overflowing on the right side of the screen (since the width becomes fixed). I can scroll right to see the rest of the menu in the header, but the footer doesn't scroll to the right. Rather, it just cuts off everything that would normally be there.
I've tried to recreate the issue in Codepen with the relevant code here: http://cdpn.io/iCJct but it doesn't act the same as the website (located here: http://dev.longviewsources.com/).
Thank you for your help!
The problem is that the footer, with position: fixed is fixed relative to the browser window rather than to your content so when the user scrolls, it moves and the user never sees it. You can use position: absolute; to fix the element to a position relative to the body which is much more controllable. From there you can make the body's height 100% and use a container with an overflow: scroll;
I made a fiddle to demonstrate: http://jsfiddle.net/jaredkhan/ywrx2/2/
I am a beginner with a site made in Dreamweaver CS4 using HTML and CSS. Every page has a slightly different amount of content. The page content is designed to 'overlap' the footer, so that the top part of the footer can be seen behind the bottom of main content (images) and the bottom of the footer lines up with the bottom of the page.
I haven't been able to achieve a position where the footer allows for the same amount (height) of content to sit over it on every page, although I have been trying with changing all the margin and padding values etc. Currently the footer is jumping around from one page to another.
What I would like is for the footer to always be below all other content but with a negative top margin / padding effect, allowing the bottom of main content to sit on top of it - I just can't seem to make it happen! Advice would be very much appreciated. Thanks in advance.
Add this line before footer
<div style ="clear:both;" /></div>
This question is a total noob one, but I can't get the difference between a normal footer and a sticky footer.
Taken from CSS tricks:
The purpose of a sticky footer is that it "sticks" to the bottom of
the browser window. But not always, if there is enough content on the
page to push the footer lower, it still does that. But if the content
on the page is short, a sticky footer will still hang to the bottom of
the browser window.
Here is a clear idea of what a Sticky footer is: https://css-tricks.com/couple-takes-sticky-footer/
And
http://css-tricks.com/sticky-footer/
And an example: https://getbootstrap.com/docs/4.0/examples/sticky-footer/
From CSS Tricks,
The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.
I would guess a sticky footer is one that stays fixed to the bottom of a page, regardless of the length of content. Like this.
I assume a sticky footer stays at the same place on a screen all the time. In what context?
A sticky footer is anchored to the bottom of the browser view port, as opposed to the bottom of the entire page. It retains its position relative to the bottom of the browser as the page scrolls.
the sticky footer will always remain at a fixed position on the screen no matter you scroll or not.It will be visible all the time at that specific place.
You can zoom out this page : http://maedeh.arianblog.com/ and also http://stackoverflow.com and compare what happens for their footers!
hope it helps!
This CSS sticky footer code pushes a website's footer to the bottom of a browser window. It is valid CSS and HTML with no unsavory hacks, so it works in all of the major browsers (even the now defunct IE5 and IE6).
How to use the CSS Sticky Footer on your website,
Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.