I've have tried this:
body {height: 100%;overflow: auto; body #cornerImage {position: absolute;bottom: 0;}
and this:
{ margin:0; padding:0; }
html, body {
height: 100%;
overflow:auto;
}
body #fixedElement {
position:fixed !important;
position: absolute; /*ie6 and above*/
bottom: 0;
}
Neither of these have worked. It seems like the position I am wanting is working, but the problem is there a giant margin pushing my content down. Am I on the right track with this? Or is this not the fix I should be trying?
IE6 simply does not support position fixed. It's been a hassle many web developers have had to live with. I've used two alternatives:
Put the scrollable portion of my content in a separate 100% width/height DIV with overflow: scroll. Then overlay my non-scrollable "fixed" element in a separate div with a greater z-index.
Do what Yelp does with the map on the sidebar and reposition the element with Javascript every time the user scrolls.
Related
On mobile devices when a position:fixed; element appears on the screen the user can scroll the <body>, through the fixed element.
body,
html{
overflow: hidden;
margin: 0;
padding: 0;
}
#fixed {
background: red;
position: fixed;
left:0;
top: 0;
width: 200px;
height: 100%;
}
#content {
background: blue;
height: 3000px;
}
I tried to add overflow:hidden for <html> and <body> but it didn't help. I would like to prevent scrolling through the fixed element, but I would like to allow the scroll, when the fixed element is visible, but the user scrolls on <body>.
I tried this with ios and android devices. What is the best solution to solve this?
background:fixed
will make the rest of the body scroll through the fixed element. That is is the default behaviour. By the looks of it, you want the fixed element to be positioned at the top of your page. Why not keep it is a separate container with position absolute and rest of the body in a different container. Then, add the scroll to the rest of the body keeping HTML, body at 100% height. you may need to keep the height fixed for the 2nd container.
http://swimclub-theme.myshopify.com/search?q=asfsf
I'm using the following theme. As you can see when you search for something that isn't available the page isn't 100% high the 'footer' part hangs out around the center of the page. Is there a way to make it so the container is always 100% high? I tried adding min-height and such but it doesn't seem to want to budge.
Does anyone have any idea why it's stuck like that?
Thanks!
Don't mess with the content height.
What you are looking for is called "sticky footer". The following is best practice CSS-only solution :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 400px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 260px;
width: 100%;
}
Source: http://mystrd.at/modern-clean-css-sticky-footer/
You could make the html and body have a min height of 100%. If the footer is put to bottom it will then be able to go there.
html, body {
min-height:100%;
}
As you said this wont work. The only thing you can do in css is to set
position: absolute; http://jsfiddle.net/52vpw2wg/1/
But you can do it with JavaScript or jQuery. Like this http://jsfiddle.net/52vpw2wg/2/
The code I'm working on is in http://jsfiddle.net/truxx/v8jnyn9h/
I would like to make everything that is in the header tag fixed (that it does not move when i scroll the site).
I found out that a code like:
div#header{
position:fixed;
}
does that, but it sends the header to the left, and I want it centered.
If I type
div#header{
margin:auto;
position:fixed;
}
the margin doesn't work at all... how should I correct this?
(I would also like to add a bar in the right of the page, that does not move either while i scroll down. Made an experiment, but something similar happened. The elements of that div box did get a fixed position, but they moved to the left, so i'm guessing it's the same problem).
Your header (which isn't in your fiddle or your question) will need a width, and top:0;
div#header {
position: fixed;
top: 0px;
margin: auto;
width:100%; /*or whatever width you want */
}
This should work for the css:
div#header {
position: fixed;
top: 0px;
margin: auto;
//AND A WIDTH PROPERTY (in pixels, percent, or em) LIKE:
margin: 100%;
}
You need to fix it to the top, as well as margin: auto to center. I couldn't find the header element in your code in the link provided, but if you code the rest correctly, that should work.
This div below is causing the page to scroll horizontally on smaller then 1450px browsers. I thought overflow would fix this issue, but does not appear to... may be something I need to do on the parent div's. Any ideas?
http://barr-display.mybigcommerce.com/
#Header {
position: relative;
clear: both;
width: 1450px;
min-height: 190px;
overflow: hidden;
background: url('/content/headerbg3.jpg') repeat-x;
}
On body you need the following
body {
width:100%;
overflow:hidden;
}
The reason your code is not working is that you're setting overflow on the child(#header) when it needs to be set on the parent.
Looks like you want three things:
No scrollbar when header image is cut off.
YES to scrollbars when main page content is cut off.
Ability for your header background to extend to the right if the browser window is wide.
You really needed to post more of the relevant code here. However, I look at your site, and this'll fix it:
Change your rule for #outer:
#Outer {
clear: both;
margin: 0 auto;
min-height: 190px;
width: 1024px;
}
Remove the margin and width rules from #outer's parent, and replace with width:100%;overflow-x:hidden;
Add these lines to your css:
html, body {
width:100%;
}
body {
overflow-x:hidden;
}
You need overflow-x so the vertical scroll bar doesn't disappear.
Also, remove overflow: hidden; from the #Header.
I know this has been discussed here many times, but none of the answers I found here, seem to address my problem.
I have this variable (in height) layout, and wnat the footer to always stick to the bottom.
I have used the min-height: 100%; to the container div, and got it somehow to always be in the bottom. trouble is, it's sinking too low to the bottom.
I've put an example here:
http://jsbin.com/erono3
As you can see, my footer is at the bottom, but will go too far in the bottom, and even though there's space on the page to display it, it's creating a scroll bar.
Also, I'd like the main container to to be shown as big as the content is (i.e. closing the square), but right now, it looks like the container is going all the way to the bottom, and my footer is covering it.
What am I doing wrong there?
Thanks in advance
You should take a look at the link by Ben Lee again :). I have used that in your layout to achieve the effect you want. See it here: http://jsbin.com/erono3/2
The important thing is for the footer to be part of the container. The container has a min-height of 100%. So it occupies the whole screen always. The header is normal what ever it is inside.
Then you should have an inner container element (important), where your main content resides. In the link above, it has the id #body. This would have a padding-bottom (to give space to the footer.
The footer is absolutely positioned with a bottom:0px meaning it is always going to be at the bottom of the container (the container has to be position:relative).
EDIT (in response to the comment)
To make your footer span the entire page, but keep everything else centered, just do this:
remove the width off of the #containter, #container spans the whole page. Provide a width to the #body element in the link above and center it, using margin: 0px auto. You get the effect you wanted.
New link: http://jsbin.com/erono3/5
Here's a simplified version of this, which is worth reading for the explanation. See if you can adapt yours to fit.
CSS:
html, body, div {
margin: 0;
border: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrap {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background-color: #aaa;
}
and HTML:
<div id="wrap">
<div id="content">Stuff goes here.</div>
<div id="footer">FOOTER</div>
</div>
The problem is you have a min-height of 100% on your container div. That means that the container will be 100% the height of its parent, which is the body tag which has a height of 100%. So if your viewport is 600px, then your body will be 600px, then your container will be 100% of that which is 600px, and then it will stick the footer after the container div which is why it goes below the veiwport.
So one thing you can do is just absolutely position your footer inside the body. Do this by changing your position to be absolute, and bottom:0px. It will float at the bottom.
You might want to put it in your container as well depending on what style you are going for and position it absolute in that and at the bottom.
Your problem is not that the footer is too low, but by making the body 100% it pushes the footer below the bottom of the page.
Consider putting the footer div inside the container div and getting rid of the margin-top: -5.5em and position: relative and it will work just fine.
http://ryanfait.com/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
This is particularly for anyone using ASP.NET master pages but also in general, if your content is also wrapped in a <form> element you will need to change
html, body {
height: 100%;
}
to
html, body, form {
height: 100%;
}