I have a html page. There is a blank space at the end of the page after footer. You can see that space in Mozilla Firefox at screen sizes 768x1024, 800x1280, 980x1280.
I have tried out everything to get rid of it but failed. This space is not even identified in the inspect element. Any help will be appreciated.
By looking at the photo, I think this is the expected behavior and is caused by the fact that you do not have enough content to fill the whole page. To fix that, you would need to create a sticky footer and make the body and html 100% height;
Please see this article for the sticky footer: https://css-tricks.com/couple-takes-sticky-footer/
Related
I don't know why, but only on Safari a section of a webpage I am working on becomes scrollable.
It is the only section which happens and it's the only browser on which this occurs.
Can anyone help me figure this one out?
Link to the webpage, if you want to inspect the code: http://sistemecreative.ro/demo-istoma/
I decided, as a workaround, to make both the left and right divs and their wrapper the same height using a fixed value.
Well I know there are a million questions regarding this topic - but I haven't found an answer for my specific case.
I am wanting to create a sticky footer (not position: fixed) but one that will stay at the bottom if the content isn't sufficient to fill the page space. If there is enough content the footer will act as normal.
Well on other pages not using bootstrap I have been able to do this:
http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
See it working on my site here:
http://www.magnetize.ca/policies.shtml#/pp
But on part of my site I am forced to use bootstrap and when I try the flexbox method things go really wrong:
http://my.magnetize.ca/knowledgebase.php
On most browsers I only see the footer get cut off on that page - but on Safari things get seriously messed up.
So, to summarize, I am looking for:
A sticky footer solution that:
Isn't the fixed footer solution (acts as a normal footer if content is sufficient to fill page)
Doesn't require a fixed footer height
Works with bootstrap
Any help you could give me with this specific problem?
EDIT:
I am just trying out the "table trick" method as listed:
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
It is live now at: http://my.magnetize.ca/knowledgebase.php (on all my.magnetize.ca pages)
It is working much better than flex-box so I have ditched that idea. Everything is working beautifully on all browsers...except safari. On safari there are massive margins at the top and bottom of the page even though no margins are set.
You could try using http://stickyjs.com/ I have used it for navigation bars that start in the middle of the page and then stick to the top.
I also found this http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/# which looks more like what you are looking for.
I have this bug that let some text appear a few pixels outside a div on the right side. The strange thing is that it only happens in Safari. I've never seen it before and it's just regular HTML/CSS what I have used. I've looked around on the internet but I can't find the exact same problem - only some problems with content floating out at the bottom, because of a fixed height.
In the next 2 screenshots you'll see the same page in Safari and Chrome. The div has a overlow:hidden to hide a possible third line of text. I added fixed widths when trying to solve the problem. I also tried to add/remove some margins, but I can't get rid of the extra pixels.
Here is a full link to this page. It happens in this section of the website only. In other sections - like this one - where I use the same format with little differences, but the same CSS idea (fixed width with overflow:hidden), there is no bug in Safari.
I hope you have some ideas!
Removing position:absolute from
div#branch-search-results-block div.search-result-right div.search-result-drvl-info-bottom .spacer::after
css style solves the issue. But I am not sure what else is affected by it. Please try this.
I'm experiencing a strange cutoff of my background image at the very bottom of my page. It's only evident if you have a short browser window and scroll to the very bottom. And it only happens on longer pages.
Firebug inspection reveals a viewport-width element, stretching entirely across the browser window at the very bottom, about 50px high that seems to be "blocking" it, but this doesn't correspond to any div in my layout - that I can find, anyway!
Also, when rolling over this strange element, it's the first <HTML lang="en-us"> line that gets highlighted in Firebug.
Longer page: http://bit.ly/151TFnW
============FOLLOWUP==================
Following the helpful suggestions here, I fixed the above by removing the 100% height from the BODY style. But that breaks something else! Now, on this shorter page:
Short page: http://bit.ly/1fvbnHY
The background image is still cut off at the bottom, when the browser window is tall enough to show this.
Remove the 100% on BODY and that second, shorter page is fine - full bg image and bottom margin - BUT the earlier link's problems return.
Help....!!!
From what I can tell, it looks to be caused by the height value assigned to body. When I remove that rule, most of the gap goes away. I assume the last bit is from some of the margin from the footer spilling over.
Well, it may or may not be considered a proper fix, as it doesn't address the reason why the pages in question reacted differently to the "body at 100% height" setting than the rest of the site... but I solved it by targeting it with CSS so that the problem pages simply don't receive that CSS rule.
So, sigh of relief, but tinged with the knowledge that I didn't really figure out why it was doing what it was doing.
So I have a site that scales down gracefully in the browser window but I am having an issue with the content outside of my header. The main and footer elements are just hovering in the middle of all my content. I believe it may be something to do with the height I set to the header but I need to space out all the elements within that correctly.
Heres a link to the site: http://nathanlangley.co.uk/sitev5/index.html
Any help will be greatly appreciated.
"I believe it may be something to do with the height I set to the header"
I just followed your link, and, following your suggestion, tried taking the height attribute off the header. It fixes it.