I have an absolute positioned div that I need to get to to fill the entire document for a background to a modal window.
I can get it to fill the window but when there is a scroll bar it doesnt fill the area that is currently visible.
This is my current code:
position:absolute;
top:0;
left:0;
height:100%;
min-height:100%;
By the way I can get it to fill the document horizontally.
Give the div position:fixed and top,bottom,left,right 0
See here:
http://jsfiddle.net/sQLPr/
edit - removed the following line
and it's parent (probably body)
position:relative
div.covered {position: fixed; top:0; left:0; bottom:0; right:0;}
test it here: http://jsfiddle.net/meo/kGUYG/2/
Position absolute is gonna scroll when you scroll the page unless you find a JS solution. You need to use position fixed so the element does not scroll when the content does.
Put it in a table with 100% width and that's all
Related
Like other pages, the main div is always a way in which occupies the entire screen seen by the User, and when he scroll down he can see another div: example1 , example2
No matter if you resize the screen, the main div will always occupy the total space seen by the User.
To test It I try this code below:
<div style="background:yellow; position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:-1; float:left;">
This is my Section!
</div>
With him I can see a large yellow background with a text occupying the entire area of my browser. Assuming I would like to add another div below this, how could I do that? Is possible with css or I will need javascript?
You can do it without javascript with only pure CSS.
With vh units, you can specify a margin-top on the next container like this :
#content { margin-top: 100vh;}
The advantage of this method is that it is fully responsive, no matter how you resize it (height or width).
See it here
If you check your div more correctly, this code:
top: 0; bottom: 0; right: 0;
Is what causes your div to occupy the whole screen because there isn't any space between the div since you set all of them at 0.
I want to disable scroll-bar functionality for chrome and don't want to hide the scroll-bar by giving overflow:hidden.
The scroll-bar should be visible
I want something like this: http://prntscr.com/ai5y9k
Any help would be great!!
use overflow: auto
that will display a scroll bar only when necessary (i.e. the content is higer than the window)
Closest you will get to, is to enforce the body to be no larger than the window then tell the scroll bar to always be present.
body {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
overflow:scroll;}
I am trying to find a way to change the scroll bar to a perfect scrollbar for the entire page
http://noraesae.github.io/perfect-scrollbar/
Any way to do so?
Make a div under the body that holds all the page's code. Give this CSS to the div:
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
overflow: scroll;
Then just apply the perfect-scrollbar on the div.
A little explanation:
// Set the div's position
position:absolute; // Set the div display to be relative to the document
// Make the div cover the full page
// by setting all directions px to 0
top:0px; // Set the div start from top
bottom:0px; // Set the div start from bottom
right:0px; // Set the div start from right
left:0px; // Set the div start from left
// Set the div to show a scrollbar on overflow
overflow: scroll;
I'm trying to lay one div over another. This is really simple if you know the dimensions of the div.
Solved here:
How to overlay one div over another div
So, here is my HTML:
<div class="container">
<div class="overlay"></div>
<div class="content"></div>
</div>
In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).
See my example on jsFiddle
The overlay should cover the content entirely. Width 100% and Height 100%. However, this does not work because in my example I positioned the overlay absolutely.
One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.
Is there any way of solving this problem in CSS?
You could set the position to absolute and then set all 4 positioning values to 0px which will make the box expand. See a demo here: http://jsfiddle.net/6g6dy/
This way you dont have to worry about recalculating things if you want padding on the overlay or the container (like you would if you used actual height and width values), because its always going to be adjusted to the outer dimensions of the box.
It's not possible to do this because:
The overlay is not contained by anything to restrict it's size (since there is no height/width applied to the container).
The size of the content div can change as content loads (since it has no fixed width/height).
I solved this by using JavaScript*. Eg.
function resizeOverlay() {
$('.overlay').css({
width: $('.content').width()
height: $('.content').height()
});
}
$('.content').find('img').on('load', resizeOverlay);
*Code not tested.
Hey are you looking like this : http://tinkerbin.com/Vc4RkGgQ
CSS
.container {
position:relative;
background:blue;
color:white;
}
.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}
I do not know what you are exactly trying to do but this might work:
container must be relative: anything from static
overlay and content are absolute :move top/left in first non static parent; no flow.
Give same top/left to be on top and higher z-index for upper element.
See this demo: http://jsfiddle.net/rathoreahsan/kEsbx/
Are you trying to do as mentioned in above Demo?
CSS:
#container {
position: relative;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
.overlay{
z-index: 10;
background: #ccc;
}
You can indeed do this without JavaScript. Your problem is that #container element has 100% width relative to the whole page. To fix this you can:
a) position it absolutely,
#container {
position: absolute;
}
b) make it float or
#container {
float: left;
}
c) make it display as table cell
#container {
display: table-cell;
}
One of the above is enough, you don't need to apply all. Also you should not position .content absolutely as this will prevent #container to have the same width/height.
If you are worried about images loading after the height is set you can go ahead and set the dimensions of the image in the containing div and use the padding-bottom hack. This way when the browsers paints over the page it knows how big the image will be before it loads.
I'm trying to make modal window for my website, I have a problem with overlay or modal div I'm not sure what is the problem.
The thing is everything except modal window shouldn't be clickable, but for some reason my navigation <ul><li> tags are visible and clickable. Here is css of my modal window :
element.style {
display:block;
left:50%;
margin-left:-210px; //generated with javascript
margin-top:-85px; //generated with javascript
position:fixed;
top:50%;
width:450px;
z-index:100;
}
Here is the css of my background overlay :
element.style {
height:1436px; //generated with javascript
left:0;
opacity:.75;
position:absolute;
top:0;
width:100%;
z-index:105;
}
What am I doing wrong ? thank you
Check the z-index property of your li tags (or the underlying ul) and either set it below 100, or set the z-index of your modal window and overlay so it's higher than that of the lis.
It appears you have the values of your z-index backwards. The higher the number, the closer it is. Your background is set to 105 but the elements on top are set to 100.