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/
Related
Hello all the web editing professionals! I have a bit an “alternative” problem:::
First off, here is my webpage that I need help adjusting elements’ heights and margins with::: www.rebelrock.fi. Please open that webpage in another browser window first!
So there are three DIV elements with the parameter position: fixed there; The MENU, the LOGO and the bottom FOOTER.
My problem is with the LOGO included DIV (at the top of the page, right under the MENU) and the main page content MARGIN-TOP positioning.
So as the browser windows size (actually the WIDTH) is changed smaller, at one point the REBELROCK .png-file LOGO IMAGE at the fixed-positioned DIV above will start automatically adjusting the width and height of that logo image. And when the logo is getting smaller (both by WIDTH and HEIGHT), then the HEIGHT of the DIV – inside of which the logo is – will be getting smaller too – and that’s exactly how I want it to be.
However, the non-fixed main content that is scrollable vertically, and especially the MARGIN-TOP value of that content will NOT be adjusted by the changing height of the FIXED logo DIV above, causing there unwanted space between the fixed logo DIV and the main content of the page.
So my question is; HOW CAN THE MARGIN-TOP VALUE OF THE MAIN CONTENT ELEMENT BE CHANGED IN RELATION TO THE CHANGING HEIGHT OF THAT LOGO DIV ABOVE IT?
As You can see, the pages are by far not finished in almost any way but I first want to have all the basic HTML/CSS to be perfect until starting to add more specific detailed content to the website. The site itself was initially a template of ADOBE DREAMWEAVER but that’s not important here 😊
I really hope someone here could help me.
Thank You in advance!
Yours, Tommi Tiihonen
e-mail: tommi.tiihonen#gmail.com
My webpage: www.rebelrock.fi
Give The saurce code to change edits on your website
I am working on a site with a header at the top and a main content area. The header does not scroll but the main area does. This means that I have a scrollbar to the right of the main area but not to right of the header and they do not line up:
In this image the red bar is the content and the orange bar is the centre section of the header that should be in line with the content.
These are both aligned using this css:
.center-content {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
What is the best approach for this?
I was thinking of just adding the scrollbar permanently but I don't really want to do this. I could then just add some padding to the left of the main section to re-center it. Alternatively I could add padding to the right of the header.
Questions:
How would I change the style of the header based on wheather the main section has a scrollbar?
How would I add padding to the main section based on wheather it has a scrollbar?
How to I get the width of the scrollbar? Is this guaranteed to be the same across all browsers (I need to cater for mobile as well)
I have created a JSbin for this that demonstrates the issue.
I am using the material-design-lite style sheets for this.
You will not want to change any styles based on the scrollbar - I think that's too complicated and it would almost certainly involve javascript. Scrollbars are also not consistent across browsers/mobile. A better option would be to fix the header to the top of the page, and make the content div's margin-top equal to the header's height. Then the scrollbar, when it appears, will be to the right of the entire page. See an example here:
http://output.jsbin.com/xuroyaceli/#
Resize the window to see how it looks with a scrollbar.
I am attempting to hold my footer div at the bottom of the site to avoid blank space underneath it on shorter pages. When I set the position of the footer to be absolute, the responsive menu button seems to take its position relative to the footer and no longer to the header. When I change it back from absolute it works normally. It is almost as if it is associating itself with the footer menu rather than the header menu, but I can see no good reason why this would happen. Also, when I am logged in to WordPress, the top menu bar (on the front end) gets pushed down in just the same way. However, this doesn't happen until the viewport hits 600px (I have no media queries at 600px). The responsive menu already appears at a viewport width of 767px.
This is a WordPress website in progress here.
I am using a custom theme and this responsive menu
Does anyone have any idea what might be going on there? Thanks.
You would need to move the #click-menu div & the #responsive-menu div outside of the footer element in order to fix this.
Here's a similar issue w/ some great answers: Absolute positioning inside absolute position
Ok, so the issue is I have a header, footer and the content div and what I want is for the content div to auto fill the height of the browser between header and footer making the footer stay on the bottom of the page, or below the content length.
when you go to incard.com.au you can see the issue on the index page as the content area is smaller then the browser window so we have added a height to the div to solve the footer floating issue.
I fixed it using jquery
$('#sitewidth').css({'height':(($(document).height())-320)+'px'});
$('#contentbody').css({'height':(($(document).height())-320)+'px'});
Remove the 'min-height: 700px' from #contentbody
So what is supposed to happen when the browser window is smaller than the height of the div?
You can set the height of the central div at 100 percent. For example, make the content div 100%, make the top and bottom fixed heights. That's kind of a hack but it works sometimes I think -- the 100% won't compress the fixed height top and bottom -- it "tries" to be 100%.
What I'm unclear about is what's supposed to happen as you make the browser window smaller. Is the header and footer supposed to stay glued to the top and bottom of your browser, while the content area gets smaller and smaller?
The only issue I see is that the orange borders on each side of your content area stop half-way down the page when the content doesn't reach the footer.
The most common way to fix this issue it to make those orange borders a background image and have it repeat-y inside of .sitewidth
I was able to fix the solution by using Javascript, it seems that to get the height of the content to fit the whole screen correctly I had to do a math thing where I took the height of the footer and header away from the browser screen size and then that gave me the min-size of my content body. as it is different on each users screen size it had to be a javascript set function.
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.