I have some webpages that do not reach the bottom of my browser viewport. It's particularly annoying because the footer is full width, so it hovers.
What i want to do is place the footer at least at the bottom of the viewport. I do not want to fix it as per the sticky footer solutions.
To make it more difficult, the footer is variable height.
Is it possible either via css/javascript for fixed height/variable height scenarios?
Try this:
x=$(window).height();
$('.content').css('min-height',x+'px');
Help it works
Related
I have a footer styled for my Wordpress site, which is not appearing to reach the full width of the site on mobile. Also, I am always able to scroll width ways, as if the site is wider than the mobile viewport. This only happens on mobile portrait, not on desktop or tablet.
I have all widths set to 100% (the header, the body, the footer and several others) but it seems the footer width renders as 1333px width whereas the header and body widths render as 1349px (as in inspect dev tools on laptop).
I have no fixed widths for any elements set in pixels of over 300px.
The footer is placed outside of the main and the main container but within the body.
I don't think any of the elements within the footer are the problem, as I have removed them and replaced them but the same problem still exists.
Photo included: Gap to right of footer
This problem maybe because one of your HTML tags on the entire webpage (out of the footer) is bigger then the screen
This problem not from the footer,please check the other parts of the webpage
Hi Hazem and thank you for your reply again. Update: I now know what was causing this problem. A left margin set in pixels on my content div that was set to 80% width was adding to the gap to the right of the footer, but only on mobile view. I then realised that my media queries were not working but I have now sorted that out, hence I have sorted the problem.
Thank you for your help.
I am trying to create a sticky footer on a custom WordPress theme. I have looked at many online tutorials with no success.
It does not seem to be working responsively, it sticks, but as soon as I re-size the browser the height increases.
The footer needs to be responsive but also stick to the bottom of the page regardless of content size.
The website in question is:
http://shopexample.co.uk/
Would really appreciate some help on this one.
Thanks :)
The problem is not your footer expanding, it is related to image dimensions and body.
When you resize your browser (smaller), the background-images' size adapts to the viewport's width, not its height. That means that at a certain point, the image doesn't vertically fit the viewport anymore.
Then what is visible is the background-color of your body.custom-background, which is, coincidentally, exactly the same color as your footer's background (background-color: #cccccc;).
You can change the background-color of your body to distinguish it from the footer. You cannot resize the image to full-browser width AND height simultaneously without distortions.
Sticky footers: I noticed your footer & its wrapper are not positioned fixed or relative, which is the common approach for sticky footers. Then position it with the bottom property.
Fixed position:
will stick to bottom
will not scroll
will always be visible
Relative position:
will stick to bottom
will scroll
will only be visible on reaching page bottom
Check the working copy of your fiddle here http://jsfiddle.net/Mohinder/Yj6gu/
Problem was with headerwrap which was not closed where it should be and with body height.
I have a container on my site that is 100% of the screen width and has its own scrollbar using overflow: auto. The standard scrollbar does not display on my site and I use this instead because there is another layer behind the main layer of my site that also has its own scrollbar (you can view my site here and click a blog post to see what I mean).
I have a blue bar that I want to be fixed to the top of the screen. This is easy enough in terms of positioning in that way with position: fixed however the width of the bar needs to be 100% of the screen width and I'm finding that the bar will overlap the scrollbar that is applied to its parent container.
Here is a jsFiddle showing what I mean: http://jsfiddle.net/xUTR2/1/
I've thought about just offsetting the bar to the left based on the width of the scrollbar, but then I decided that I couldn't rely on estimating the width of the scrollbar across different browsers, and that would leave a gap if there were no scrollbar.
Is there an obvious way to force the scrollbar to render ontop?
As I can't comment yet, im forced to give an answer.
If im correct you would like to get the top blue bar in a fixed position as in visible while scrolling down.
personally i would make seperate containers
something like
<div id='page'>
<div id='bluebar'></div>
<div id='content'></div>
</div>
Demo can be found here ( http://limpid.nl/lab/css/fixed/header )
you can do this by jquery easily, at some event.
$("body").load(function () {
$('scrollable container').css('overflow-y', 'auto');
});
try keeping the blue bar and other page content in separate containers, i think it will solve the problem for you.
This is impossible to achieve in a clean/robust kind of way because anything you position as fixed is done so within the context of the main browser (and within any scrollbar it has), but because you removed the main body scrollbar (and you must because you cannot z-index position on top of it) it doesn't think anything is there, yet you have this div below it so the only options you have are to use fixed margin and height for the two elements or use some javascript method to determine the correct width of your top div.
I have been running into problems with the height of the header in a site for a uni project.
What I want to achieve is a header which contains a nav, background image slider (which is 100% wide) and speech bubble, with the site content below the header.
At the moment I have it all working as it should be, but the height of the header is not taking into consideration the background image slider, the reason for this being that it (the background-slider) has had to be positioned absolutely. With the current state of the site, I have added a header height in em, this gives me the required spacing on my laptop, but when moving to larger resolution the height is insufficient and the site content runs into the image.
My question is, is there a way of maintaining the current layout but including the functionality of the adjustable header height?
Current site is at: http://beta.immbudden.com
If you are viewing on screen size larger than 1366 x 768, you will see what I mean.
Any help at all would be really appreciated, many thanks in advance!
I actually managed to fix it myself. I positioned the nav absolute, speech bubble absolute and background-slider relative. I then gave each appropriate z-index's. I also had to change the order that each was called in the html, placing the slider from being called first, to last.
Hope this manages to help someone else, and if you need it explained any better just comment here :)
Add a bottom-margin to the header equal to the height of the absolutely positioned nav.
Why not just set the height of the header in pixels? If you have a set height nav and the image slider, you should be able to just set it.
I've just spent the last few weeks learning how to properly design a layout. I basically thought I had everything perfect with my website layout and was ready to go about transferring the coding to Wordpress... and then I accidentally resized my web browser and discovered that all of my div layers were overlapping each other.
Here's what it looks like:
Basically it looks as though it's mainly my center content div that is being squeezed out, as well as my header image and navigation witch are in the same top div. My footer is also squeezed down as well. I've searched the internet for a solution to this problem and can't seem to find a thing.
How do I fix it so that my divs stay in place when the browser is resized?
as Walter said your CSS would be helpful. But, the main problem is that the content in the div is overflowing to other divs because the the content's div cannot contain all the content.
In your css, try setting the div's overflow property to either auto (shows scrolls bars) or hidden (to just hide the content if it goes outside's the div)
e.g.
overflow:auto;
or
overflow:hidden;
Express your widths and font-sizes in ems.
Here's a good calculator:
http://riddle.pl/emcalc/
Percentages will work, too.
Check the css in stackoverflow, and try resizing the zoom level in your browser here - you'll see everything resizes nicely at any zoom level.
I figured it out. Turns out that the width of my center content margin was dictated by margins instead of just a direct width (ie. 500px). So whenever the page was resized, the margins on the sides of the browser tried to stay as they were, thus making the entire column smaller. I just had to get rid of the margins and specify where I wanted the column to sit on the page and just justify a width for it.
you can also try the min-width. i am assuming the center div is fluid and sidebars are fixed-width.
Can you post some of your CSS?
The simplest way is to give all of your columns relatively sane width settings so that the size of the browser window doesn't affect the size of your layout. Getting fluid-width column(s) to behave is more complex and depends more on the specifics of your layout.
Check out the min-width property. Another option is applying another stylesheet when the viewport width is below x pixels with CSS3 Media Queries like so:
#media all and (max-width: 30em) {
/* Alternative narrow styles */
}
or so:
<link media="all and (max-width: 30em)"
rel="stylesheet" href="narrow.css" />
CSS3 Media Queries are still not widely supported, so you might want to look into a solution that applies the "narrow" style sheet with JavaScript through the window.onresize event. I'd recommend jQuery for such a solution.
I Had the same problem if you have a width and height in your DIV Container it wont change except the width unless you put a min-width. The problem I had was when I would make the browser window the divs would like go to the next line
so what I did was in the container I set a height and width. Before I didn't set a height I let the divs determine the heights.