I have a div with style position:fixed and i want it to scroll down the page, but i don't want the div to spill into the page footer. How could i accomplish this?
thanks in advance,
shawn
Try this.
CSS
body, html {height:100%;margin:0;padding:0} /* margin and padding 0 for firefox*/
.mainBody {height:90%;overflow:auto;}
HTML
<div style="border:1px solid black;">TOP</div>
<div class="mainBody">
<div style="height:800px;"></div> <!-- To for scroll -->
HERE IS Main Body
</div>
This will transfer the scroll bars from the window, to the div that is showing your content.
The TOP div will stay put where ever you want it, so you can position it aboslutely or leave it as is, and have it never collide with your footer, which you can put in your main body div.
I've had the same problem in the past and used a Javascript onscroll event to detect if the position:fixed element is going to collide with the footer. If it is, I change it to position:absolute with a top attribute just above overlapping the footer.
Then when they start scrolling back up the page and it's no longer overlapping the footer, I change it back to position:fixed.
Also, if you're planning to have this element scroll in IE6, I recommend CSS expressions for position:fixed emulation.
Related
I have the following structure:
<div id="wrap">
<div id="container">
<div id="header">
</div> <!--close header-->
<div id="main">
… etc
I'm trying to display a background image that will show the full height of the image, but not force the page to scroll as a result of it but that will scroll with the page content.
I've placed a #bgimage div after the opening tag of the #container div and I've tried the following CSS:
position:fixed + height:100% - displays the full height of the image but doesn't scroll with the page content
position:absolute + height:100% - scrolls with the page but cuts off the image where the page content ends
position: absolute + height:1000px - displays the full image but forces the page to scroll
Any idea?
Thanks
Set the background on the body itself. CSS3 allows you to set multiple backgrounds in case you already got one. Although this doesn't work in IE8 and before.
[edit]
Since that doesn't work in your page, try to make the bgimage div a container for your page content without specifying an exact height. Set the min-height to 100%.
That way, it should size to the page content. It will always reach to the bottom of the window, and it won't force scrollbars when they're not needed. The min-height causes the div to fill the window in case the content is smaller than the window height.
Use background-attachment: fixed; it will scroll with the page.
I have a fixed height scrollable <div id="overlay"> positioned over all the page elements using position:fixed. In the div I have elements higher than the fixed height, so the scrollbar appears. I also have a tooltip that I want to stay with a paragraph even if it is scrolled.
That's what I want to happen here, but unfortunately neither of my solutions work properly:
I add position:absolute to the tooltip and position:relative to #overlay(the tooltip's parent): http://jsfiddle.net/4qTke/
The tooltip scrolls as expected but it is not visible outside of #overlay.
I only add position:absolute to the tooltip: http://jsfiddle.net/Yp6Wf/
The tooltip is visible outside of the parent #overlay but doesn't move when the div is scrolled.
I want the tooltip to always be visible AND for it to move when scrolled.
What you want is not possible using just CSS and HTML.
The main problem you have is that you have set overflow: scroll on the container your #tooltip is relative to. Because this overflow property is stopping any content from appearing outside of its edges when you position #tooltip "outside" of the div it will be hidden and only visible when scrolled to.
The reason it was visible in your second scenario is because without setting position:relative your #tooltip was relative to the page and not the container. Which meant it was not affected by the overflow:scroll property of the container.
HTML:
<div id="overlay">
<div class="elemRel">
<div class="elemAbs">
<!-- Your Code -->
</div>
</div>
</div>
CSS:
#overlay { position:fixed; }
.elemRel { position:relative; }
.elemAbs { position:absolute; }
Maybe this is an alternative for you? See demo fiddle.
I have a div that contains a smaller div with some text. The container div has a webkit transition that moves it off the screen. I want the smaller div to move with it, until it gets to the edge of the page, then remain fixed, almost as if it gets 'stuck' on the side of the page, while the container div continues to move underneath it out of sight. Can this be done?
//CSS
.move{
-webkit-transition-property:left;
-webkit-transition-timing-function:ease-in-out;
-webkit-transition-duration:1s;
left:-200px;
}
//HTML
<div onclick="this.className='move'">
<div>
some text here
</div>
</div>
Here's an example for you: http://jsfiddle.net/LjjRM/
A couple points:
1.) jQuery
2.) position: absolute
Background
I have the following html code:
<div id="parent">
<div id="child">
I'm the child!
</div>
</div>
I want the parent div to be positioned relative to the bottom of the page as with the css properties position: absolute, bottom: 0px.
This works fine if the child div(s) have no padding or border. However, as showcased in this JSFiddle example, if the child has padding or a border, it expands beyond the bottom of the parent div (notice the rendered page is scrollable and there is additional content from the child div below the bottom of the page).
Question
What's the best way to make sure the parent div fully encompasses the child div vertically? (Correct me if I'm wrong, but this doesn't appear to be a problem with horizontal padding/borders)
My best idea was to add the sum of the padding/border/margin of to the padding to the parent div. Using something like SASS to generate the actual css makes this slightly more palatable, but still seems like a really unclean solution. Is there a better way?
Thanks!
(As a side note, when I made the JSFiddle example I noticed the right border was missing on the child div. Is this just a fluke with JSFiddle or something?)
If you get rid of those display: inline;s it will work like a charm.
I have been trying to add a scroller to my context section that will only allow the box to scroll horizontally within the visible of the viewer's screen, not vertical.
Does anyone know any code to have scrollable content in a div in a fluid css layout design?
Also, here is a link to a website that has the exact scroll effect I am trying to recreate: http://patrickhoelck.com/home.html
Does anyone know any code to have scrollable content in a div in a fluid css layout design?
'overflow: auto' will add the scroll bar when necessary.
The trick is to make sure the content inside the scrollable element exceeds the normal width of the element, instead of simply reflowing onto a new row in which case it'll never trigger a scroll bar. One way to do this is by using 'white-space: nowrap'.
You probably want to take a look at overflow-x: scroll, which, along with setting a fixed size on the parent, will force a horizontal scrollbar if the content is too wide.
Some example html:
<div style="width: 50px; overflow-x: scroll">
<p>Hello world!</p>
<p>Here is a div with a horizontal scrollbar!</p>
</div>