I'm trying to get a background working with a sticky footer and I've hit a brick wall. For some reason, the blank space underneath body seems to stop at an elastic height above the bottom depending on the window height.
I can't see anything which could cause this and would really appreciate a pointer.
The demo site is at http://myfitzeek.lime49.com
According to your link, you just change
html {
height: 100%;
margin: 0;
padding: 0;
}
#footer{
position: absolute;
....
}
to
html {
margin: 0;
padding: 0;
}
#footer {
position: fixed;
....
}
Related
I want to add to my site based on Bootstrap 3 Affix feature for bottom navigation links. These links fixed on the bottom and added offset for the footer.
But when I scroll to the footer I see the navigation do some small "jump".
All work as need, even if I toggle to a mobile panel in Google Chrome. But excluding real mobile devices. In any case, I tried on three Android devices.
I added a link to a short video from the phone screen for clarifying: https://imgur.com/a/lcBASRD.
Please see to the bottom of the screen.
CSS:
#nav_affix {
left: 50%;
margin-left: -70px;
width: 140px;
z-index: 99999;
}
.affix {
position: fixed;
bottom: 0;
}
#nav_affix.affix-bottom {
position: absolute;
}
#nav_affix div.next {
float: right;
}
#nav_affix div.prev {
float: left;
}
#nav_affix div.next,
#nav_affix div.prev {
width: 60px;
height: 60px;
border-radius: 10px;
}
JS:
$('#nav_affix').affix({
offset: {
bottom: $('.footer_wrap').outerHeight(true)
}
});
Any ideas?
Thx for any answer.
Best.
You should place footer in a wrapper with same height as footer. Thus, when footer placing its original position, it will not make a jump.
I have done this with dynamically but also static height will solve the problem.
$('#nav_affix').on('affix.bs.affix', function () {
$('#footer-wrapper').height($('#nav_affix').outerHeight(true))
});
I need a horizontal scrollbar to show on my website when I make the browser window smaller. When I put {overflow-x:auto;} I get a scrollbar instantly even when browser is maximized, and I get like 100 pixels of blank space of my body on the right side.
body {
padding: 0;
margin: 0;
}
.container {
font-size: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
}
Try to use this
body {
padding:0;
margin:0;
}
.container {
font-size: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
bottom: 0;
overflow-y:scroll;
margin-right: -10px;
overflow-x:hidden;
} `
If you still face any issue. Can you please share fiddle link where I can check and provide you more accurate solution.
If you want to show the scrollbars only when needed, then you need to use overflow:auto, for more reference please have look here.
The structure of the page is quite messy so I won't go into fixing the structure, but will provide the answer how I got the horizontal bar to show.
The problem is in the div#navbar child elements. And the way you are using margin and padding properties. For some information how to use them have look here.
The div#ctu element has the margin-left property active which expands the element outside its inherited sizes.
#ctu{
margin-left:20px --> padding-left:20px;
}
#ft{
position:absolute; ---> position:relative;
padding-left:10px --> padding-left:0px;
}
.container{
overflow-y: scroll; ---> overflow-y:auto;
overflow-x: hidden !important; overflow-y:auto;
//OR
overflow:auto;
}
I finally got a sticky footer to work with a push div. Unfortunately, I now have a strange block above my wrapper that has shown up. I would like to get rid of this of course.
Site in question:
http://print503.squarespace.com/gallery/
Basic HTML structure:
<body>
<div id = "wrapper">
[all content divs (dynamic/responsive)]
<div class = "push">
</div>
</div>
<div id = "footer">
</div>
</body>
Basic CSS Structure:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
z-index: 1;
}
.push {
opacity: 0;
height: 50px;
bottom: 0;
}
#footer {
background-color: #000;
height: 200px;
bottom: 0;
}
So I'm overriding the template for this squarespace site with my own HTML and CSS. I think the wrapper (named "#outerWrapper") is a background image. I don't know if this is what is causing the problem with the block at the top that now appears.
I've done hours of research and cannot figure out this issue. Would love some help. Thanks in advance.
Adding
#outerWrapper {
display: inline-block;
}
seems to fix it, if that's what you're going for (to get rid of the top black bar and have the background image show all the way to the top).
http://jsfiddle.net/talmuda3/s9QyR/
footer {
margin-top: 1em;
width: 100%;
height: 20em;
position: relative;
bottom: 0;
left: 0;
}
The layout of an offline website is tricky. The content overflows into the footer.
Part of the code is as above.
How can the content be adjusted so the footer remains at the bottom, and the content stretches across the site without overlapping the footer. Please be gentle. Checked Chris Coyier's site for any tips - might just have missed something. Can anyone help?
You're pushing the article down with the top: 12em declaration. You should give the footer the same property, which fixes the issue: http://jsfiddle.net/s9QyR/1/
you should also push footer top:12em; that will add footer in right position. demo
I think this is what you're after - jsFiddle
article {
margin-top:12em;
width:80%;
height:100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 3em;
padding: 1em;
z-index: 2;
background: transparent;
overflow: visible;
}
footer {
margin-top: 1em;
width: 100%;
height: 20em;
}
It seems that changing the positioning broke the natural flow of your elements.
You may want to try this method to avoid having to position everything down the line.
I have been struggling with this for quite some time now and I'm in need of some help. I would like to get the same affect as this website where an image floats next to the wrapper id but when resizing the page the image stays in place.
http://pack155.com/
Just look at the code there:
#page is the wrapper of the image #bear
#page {
width: 1024px;
margin: 0 auto;
position: relative;
}
#bear {
position: absolute;
right: 3px;
top: 250px;
}