Right now I have a floating box on the left side of my site that holds a stumble, facebook, twitter share code.
#fixmetoo {
position: absolute;
right: 30px;
top: 0px;
}
#fixme { position: fixed; }
It stays put as you scroll but i want it to disappear if the footer is showing.
I have a page that is 960 px wide and the floating box shows great but the footer is 100% wide and the box covers the footer.
so if my footer is 300px tall how can i hide the floating box IF i am less than 300 px from the bottom of the page?
Note that the z-index solution is probably what you want, but it will only work if the footer is a sibling element of the fixed-position panel (not exactly... just has to be in the same 'stacking context').
You probably however want to make the footer {position:relative; z-index:2;}, unless it is already absolutely positioned.
If you dislike the panel going behind the footer, the only sane way you can get the panel to stop scrolling before the footer is with javascript.
Try using the z-index property.
#footer{ position:absolute; z-index:2; }
#fixme{ z-index:1; }
Please post more of your code. Or use http://jsfiddle.net
Related
To set body-height to 100% I use the following code:
html {height: 100%;}
body{
min-height: 100%;
position: relative;
}
I thought this workaround works always, no matter what the content does, but when I use content, that is absolute positioned, the body seems to loose the 100%-height property.
You can see the example here:
Go to https://www.appfelsine.com/was-kostet-eine-App
Reduce the browser width as far as u can.
scroll down.
there is a white area at the bottom.
Position:fixed; would help for the white area, but then it is impossible to reach the button at the bottom.
position: fixed; and overflow-y:scroll; will result in a double scroll bar - doesn't look very nice.
Have you got an idea how to pull the body down until the bottom?
position: fixed; overflow-y:auto; will prevent scrollbar showing when it is not getting overflow. It prevents double scrollbar issue
Maybe you can just put "background-color: #3ab252" on your ".question-inner" ?
I have a site based on foundation 5 & angularjs with the following layout:
header
-left-nav
--content
footer
Currently the left nav is absolute positioned to the left with an initial height of 100% (top:0, bottom:0)
The content div changes in height as to what is being loaded into it (via ajax). I'm manually adjusting the height of the left-nav div when the content height changes, but I was wondering if there was a way with html/css that would enable me to get rid of this script.
I've tried using all the techniques i've found through googling, but none seem to work without the javascript.. I need the left nav to always been 100% of the page height as it has a dark background that stretches to the bottom of the page.
Many thanks,
Ben
Update
Its working in this jsfiddle.net
This FIDDLE has an "add content" button which will show you it working with dynamic data.
I just changed this ...
.small-fixed-130-left.column {
position:absolute;
width:11.4285714286rem;
top:0;
left:0;
bottom: 0;
}
You could position: fixed; the left nav with a height: 100%;
I've been researching this problem and can't seem to find an answer that properly addresses my issue. I have created a vertical sidebar menu which stays docked to the left side of the screen. The menu has a different background color than the rest of the page and should be as tall as the entire page. To accomplish this, I've used the CSS properties:
#menu {
height: 100%;
background-color: #222;
position: absolute;
top: 0px;
bottom: 0px;
}
This works correctly, however, when elements are dynamically added to the body in such a way that they cause the height of the body to change, the height of the menu no longer takes up the entire screen. Instead, I get white space below the dark background color of the menu. This also occurs when I have the console open in Firefox and then scroll down.
How can I keep the vertical menu bar stretching down then entire side of the page? None of the similar suggestions I've seen so far on Stackoverflow or Google seem to work.
height:100%; takes up the view-port height so if your body content are increased than view-port height then you'll see your siderbar 100% heighty as its view-port as is.
You can just remove the height:100%; and your code would work fine, by using fixed positioning and using top:0;bottom:0; which would be the document's top and bottom values.
#menu {
/*height: 100%;*/
background-color: #222;
position: fixed;/*using fixed positioning only works*/
top: 0px;
bottom: 0px;
}
Also, don't forget to use the width while using fixed positioning, or alternatively, you may use left and right values.
I have some text that I display in a div with the following CSS:
.fixed-box {
position:fixed;
top:10px;
width: 270px;
}
This is so that when I scroll it always shows on the top of the screen. However when there is a lot of text the div gets cut off, because the position:fixed prevents it from scrolling down with the page it's on.
I was going to switch to an iframe, but is this really the best way to go?
Add overflow:auto; and set height property either to 100% or manually.
Here is code example http://jsfiddle.net/7ZVb8/
I have a website scrolling horizontally using this script:
http://tympanus.net/Tutorials/WebsiteScrolling/index.html
Sometimes with this build I end up with a vertical scrollbar because, depending on the user's resolution, the copy may run further down the visible portion of the page.
I have a bit of footer information that I want to scroll along with the page horizontally, but I want it to always be at the VERY bottom of the page if there is a scrollbar, not just the window. Using this CSS:
.footer { position: fixed; bottom: 10px; left: 100px; }
Doesn't do what I want because the footer will overlay the site's copy.
So I also tried something like this:
html, body { min-height: 900px; }
.footer { position: fixed; top: 880px; left: 100px; }
Which also didn't work because the information was still always pushed off the visible portion of the page.
So I'm looking for a solution to essentially let the footer information lay wherever it naturally falls on the page, but always fixed 100px from the left as the page scrolls horizontally.
Thanks for any help!
I'm not sure you can do this entirely with CSS. I would make a javascript (or jquery) function that detects the size of the content div (or body) and positions your footer div after it (with offset if you're using jquery, or by manipulating the top margin if not). Then you can use the .scroll method on the window to move the div's horizontal position when a user scrolls to the right.