Scroll part of content in fixed position container
It seems to work if you use
div#scrollable {
overflow-y: scroll;
height: 100%;
}
and add padding-bottom: 60px
to div.sidebar
.
For example: http://jsfiddle.net/AKL35/6/
However, I am unsure why it must be 60px
.
Also, you missed the f
from overflow-y: scroll;
Place an item at a fixed position in a scrolling div
A standardly supported way is to edit the HTML markup and add a wrapper element to both the scrollable and the "fixed" element - which will now have position: absolute;
instead:
#wrapper { /* ADDED */ position: relative; width: 200px;}
#scrollable { height: 100px; border: 1px solid; overflow: auto; position: relative;}
#wrapperFooter { background: red; position: absolute; /**/ bottom:0;}
<div id="wrapper"> <div id="scrollable"> <p style="border: 4px dashed #000; height: 200px;"></p> </div> <div id="wrapperFooter">ABSOLUTELY! :)</div></div>
Fixed position but relative to container
Short answer: no. (It is now possible with CSS transform. See the edit below)
Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:
#fixedContainer {
position: fixed;
width: 600px;
height: 200px;
left: 50%;
top: 0%;
margin-left: -300px; /*half the width*/
}
http://jsfiddle.net/HFjU6/1/
Edit (03/2015):
This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%)
. This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%
) because it will be relative to the parent and not the element it's applied to. transform
behaves differently. Its values are relative to the element they are applied to. Thus, 50%
for transform
means half the width of the element, while 50%
for margin is half of the parent's width. This is an IE9+ solution
Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
If you want it to be centered, you can do that too:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Demos:
jsFiddle: Centered horizontally only
jsFiddle: Centered both horizontally and vertically
Original credit goes to user aaronk6 for pointing it out to me in this answer
Have a fixed position div that needs to scroll if content overflows
The problem with using height:100%
is that it will be 100% of the page instead of 100% of the window (as you would probably expect it to be). This will cause the problem that you're seeing, because the non-fixed content is long enough to include the fixed content with 100% height without requiring a scroll bar. The browser doesn't know/care that you can't actually scroll that bar down to see it
You can use fixed
to accomplish what you're trying to do.
.fixed-content {
top: 0;
bottom:0;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
This fork of your fiddle shows my fix:
http://jsfiddle.net/strider820/84AsW/1/
CSS: Scroll in fixed div-Container
You should try a different approach, you want the background fixed in the left and the right, and the content inside.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body, html {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.bg_left {
background-color: #333C33;
background-position: left;
position: fixed;
left:0;
height: 100vh;
}
.bg_right {
background-color: #005050;
position: fixed;
right:0;
height: 100vh;
}
.top {
text-align:center;
}
</style>
</head>
<body>
<div class="bg_left" style="width: 33.3%; height: 100%"></div>
<div class="bg_right" style="width: 33.3%; height: 100%"></div>
<div class="top" style="width: 100%; height: 100%">Test
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
test</div>
</body>
</html>
This will work, although it's still probably not the best solution. But it all depends in the real need you have. But try this out.
Hope it helps!
Related Topics
How to Open Native iOS App (Calendar, Notes...) from a Link on Website
Achieving Min-Width with Viewport Meta Tag
How Much Faster Is It to Use Inline/Base64 Images for a Web Site Than Just Linking to The Hard File
Create a Basic Mailchimp Signup Form Using Their API
How to Vertically Align Text in a Paragraph
Missalignment with Inline-Block (Other Elements Pushed Down)
How to Check If The Browser Can Play Mp4 via HTML5 Video Tag
Gradient Colors in Internet Explorer
In The Dom Are Node Ids Case Sensititve
How to Make a Youtube Embedded Video a Full Page Width One
How to Have Attributes on Closing Tags
Emulate Ie7 for Ie8 But Not for Ie9 Using "X-Ua-Compatible"
Vscode Not Auto Completing HTML
Best Way to Do Columns in HTML/CSS
How to Tint an Image with HTML5 Canvas
Does Svg Xmlns Attribute Value Requires Protocol? Can It Be Https or Relative