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.
Related
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;
}
I used a position:fixed div with overflow: auto; as a transparent div in the back of some pop up.
The problem is when I scroll to see this pop up bottom or top, this overlap appears.
How could I keep using this div as a background with the ability to scroll without this overlapping?
HTML
<div class="popup_screen_bg">
<div class="popup_screen">
<!-- update partner "form" -->
</div>
</div>
CSS
.popup_screen_bg{
position: fixed;
min-width: 100%;
min-height: 100%;
height: auto;
z-index: 1000;
overflow: auto;
background: url('popup_transparent.png');
padding-bottom: 20px;
}
.popup_screen{
position: absolute;
min-width: 80%;
min-height: 80%;
left: 10%;
top: 10%;
background-color: #EEE;
border: 8px solid rgba(0, 0, 0, 0.5);
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
}
Note: This problem appears only in Chrome.
. You can see that it is scrolled down in google chrome, and there is no overlap. Maybe there's another reason? Or maybe it's just a glitch, since you said it is working on all other browsers. If you also look in the right, there are your styles, and your div is at the top of the interior of <body>.
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 div that can be revealed from several buttons on the screen. I'd like it so the div always appears 15px from the top of the screen, even if the window is scrolled to the bottom. But, i dont want it to be fixed. (meaning you should be able to scroll away from it.
#tip {
background: #fff;
width: 300px;
z-index: 100;
display: none;
position: absolute;
top: 15px;
right: -330px;
-webkit-border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
}
What Javascript solution do I need here?
Without jQuery, the best I could suggest is this:
document.getElementById('tip').style.top = document.scrollTop + 15;
You can try with http://code.google.com/p/jquery-scroll-follow/ - the element will be attached to viewport and will follow it as you scroll http://kitchen.net-perspective.com/sf-example-1.html