I have a div that is added dynamically using JS that includes an overlay and a contained element that should scroll with the page as necessary (I don't want any scrolling to happen within that div, which resizes to fit the content). The overlay is set to width=100% and height=100% to cover the entire page. However, when the contained div ends up being taller than the viewport, this causes the overlay to stop short after the height of the viewport.
That explanation kind of sucks so probably easier to see what I mean, so here's a simplified fiddle:
http://jsfiddle.net/72SU5/
Here's the CSS I'm using:
#overlay {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
z-index: 20;
}
#overlay > div {
width: 100px;
border: 1px solid #ccc;
padding: 20px;
padding-bottom: 40px;
background: #eee;
margin: 50px auto;
}
My question is how I might have the overlay extend to 100% of the new height once the hidden content is shown. I'm fine using JS/jQuery to accomplish this.
Or, if there's a better pure-CSS approach that requires refactoring, I'm open to that as well. The only requirement is that the overlaying content scrolls with the page if the content causes it to extend beyond the viewport.
Add the following property to your #overlay CSS class:
overflow:auto;
Fiddle
You could also remove the height property from the #overlay class.
http://jsfiddle.net/72SU5/6/
#overlay {
width: 100%;
height: auto;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
z-index: 20;
}
#overlay > div {
width: 100px;
border: 1px solid #ccc;
padding: 20px;
padding-bottom: 40px;
background: #eee;
margin: 50px auto;
}
Related
index.html
<div name="MainContent" id="MainContent" class="MainContent">
</div>
index.sass
body, html
border: none;
outline: none;
background-color: #FFF;
color: #000;
margin: 0 0 0 0
#MainContent
border: none;
outline: none;
position: relative;
background-color: #000;
color: #FFF;
margin: -250px 0 0 100px;
float: left;
width: 2000px;
min-width: 2000px;
max-width: 2000px;
height: 500px;
min-height: 500px;
max-height: 500px;
top: 50%;
Horizontal scrolling is working, however, only by using the bar at the bottom of the page. If i attempt to use the scroll wheel the page will not scroll. Any ideas as to why that is and how to make that work?
To remove your body scroll property, add overflow:hidden to your html or body styles.
body,html {
overflow:hidden;
}
To make your div scrollable, set its width to 100%, and enable horizontal scrolling by adding overflow-x:auto. Now the width of the div will be 100% to the body , and if the content inside the div has higher width, then the scroll will get enabled.
#MainContent {
width:100%; /* you can even set a static width here, which could be less than the body width*/
overflow-x:auto;
}
NB: Please REMOVE the min-width:2000px and max-width:2000px from the #MainContent style
So I want my div background to scroll be the height of the window even when you scroll down.
However It seems to only be the height of the original window size. When I scroll down I am seeing the background of my body.
I've searched this site for similar questions and all I'm finding is to use height: 100%;
but that is not working.
Here is my CSS code:
div#graycontainer {
margin: auto;
margin-top: 50px;
width:1000px;
background-color: #D9D9D9;
height: 100%;
/*box-shadow: 10px 10px 7px #888888;*/
/*border: 3px solid #888889;*/
border-radius: 1px;
}
I don't believe there is any problem with my other code and using this site as a last resort.
Thanks for any help!
Using height: 100%; will only create the image with the height of the browser. What you want to do is something that doesn't depend on the scroll position. In the case that you want the image to stay in place on scroll, you might use position. First use position: fixed; This will set the image at its very position. And after that you can use the z-index to make sure it stays above the background. Use this:
#image_at_back {
margin: auto;
margin-top: 50px;
width:1000px;
background-color: #D9D9D9;
height: 100%;
/*box-shadow: 10px 10px 7px #888888;*/
/*border: 3px solid #888889;*/
border-radius: 1px;
position: fixed;
z-index: -1; // to make it a background
}
You can read more here.
When you add the fixed position, try to add some text to make the scroll bar visible. Then when you scroll it, the image stays at its position.
I have a real simple page that has a header, footer, body, and left and right nav's.
All of them together make a nice rectangular page thats 100% of the width.
All made using div's in a css sheet.
I have 20 image thumbnails in the body and when the page is resized they push my footer out of place.
To fix this i would like to add a scrollbar to the body div.
I have already done this with overflow-y: auto;
However,
Adding the scrollbar seems to add some space to the right side of the body, forcing it to be placed underneath the left and right nav's blowing everything up. Please Help.
#headerElement {
width: 100%;
height: 50px;
border: 2px solid #000000;
background-color: #F8AA3C;
}
#bodyElement {
margin-left: 10%;
width: 80%;
color: blue;
height: 400px;
background-color: #F8883C;
border: 2px dashed #F8AA3C;
overflow-y: auto;
}
#leftNavigationElement {
float: left;
width: 10%;
height: 400px;
border: 2px dashed #FF0000;
background-color: #8F883C;
}
#rightNavigationElement {
float: right;
width: 10%;
height: 400px;
border: 2px dashed #0000FF;
background-color: #F888FC;
}
#footerElement {
clear: both;
border: 2px dashed #00FFFF;
height: 50px;
width: 100%;
}
Because the scroll bar is not inside the width of the div but still takes up space, you need to give it some space or negative margins. I would guess a width of 18 pixels for IE, and since you cannot set that in IE, that will have to be your default.
::-webkit-scrollbar { width: 18px; margin-right:-18px; }
::-moz-scrollbar { width: 18px; margin-right:-18px;}
::-o-scrollbar { width: 18px; margin-right:-18px;}
You'll need to either restructure the page so it flows better or force the scrollbar with {overflow-y: scroll} and adjust widths accordingly so the layout doesn't break.
How can I positionate a fixed element at the left side of the div with processing resize events?
Here's example: http://jsfiddle.net/yHErk/10/
Now on my screen resolution .skicked is right at the left side of .container. But if I'll simply resize the result window, it'll change. Is there a simple way to do that thing I want?
Thank you.
Currently your .sticked div has no relative parent to hold it so it is moving according to the re-size.
Add .sticked div inside the container div.
CSS
.container {
width: 300px;
margin-left: auto;
margin-right: auto;
border: 1px solid;
background: #dedede;
padding: 10px; position:relative
}
.sticked {
position: absolute;
top: 100px;
left: -50px;
border: 1px solid;
border-radius: 5px;
padding: 10px;
background: white;
}
​DEMO
I have a problem with a slider(mainly border issues). You can see a slider here
Click on the 6. Owner option and there you can see a border. This border should come on all the other tabs.
My solution would be to wrap div #slides in yet another div with this css:
height: 231px;
left: 438px;
overflow: hidden;
position: absolute;
top: 185px;
width: 683px;
and from the declaration of ".tophdr_rt_slider #slides" remove two attributes:
float: left;
margin-top: -236px;
After that it works like a charm.
Add this code:
<style type="text/css">
.slide {
overflow:hidden;
}
.slide img {
margin: 2px 10px 0px 10px;
}
</style>