What is the trick to have a div 100% height always, even if the user is scrolling ?
I try this but it didn't work the height is only applied to the active window.
<body>
[...]
<div class="popup_container">...</div>
</body>
.popup_container {
position: absolute;
background-color: rgba(0, 0, 0, 0.65);
width: 100%;
min-height: 100%; /** even this didn't work **/
top: 0;
left: 0;
z-index: 12;
}
.popup_container {
position: fixed;
Change position to fixed. That should fix your problem ;)
Here's a jsfiddle
Related
I have a pop-up in my webpage and for it to stand out I have another div (blurDiv) that is basically a white background with 80% opacity between the pop-up and the webpage.
The issue I am having is that the webpage is longer than the viewport and blurDiv will fill the viewPort but it doesn't cover the part of the webpage under that when you scroll or even if you dont scroll but started scrolled down a bit the blurDiv starts from the top so it doesnt cover all the way to the bottom.
The HTML is basically
.blur {
position: absolute;
top: 0;
left: 0;
overflow: auto;
z-index: 2;
min-height: 100vh;
min-width: 100vw;
background-color: rgba(255,255,255, 0.8);
}
<body>
<section class='section' >
<h1 class='header'>Header</h1>
<table class='table'>....</table>
<div class="popup-div hide">........</div>
<div class="blur hide" id="blur"></div>
</section>
</body>
I have tried putting the div outside the section directly under the body.
I have also tried setting the body and/or the section min-width and min-height to 100vw and 100vh and setting both or either to relative to be the parent of the blurDiv.
Ive also tried 100% instead of 100vw & 100vh.
Tried setting right and bottom to 0, also tried without overflow auto.
None of those seems to help....
Any help would be appreciated
try doing:
.blur {
position: fixed;
top: 0;
left: 0;
overflow: auto;
z-index: 2;
min-height: 100%;
min-width: 100vw;
background-color: rgba(255,255,255, 0.8);
}
.popup_div{
position: absolute;
top:10px;
}
and for hidding the pop-up
.hide{
display: none;
}
I have a DOM that looks like this:
<body>
<div id="main">
<iframe id="content"></iframe>
</div>
<div id="overlayWrapper">
<div id="overlay"><--THIS IS EMPTY DIV--></div>
</div>
</body>
Where inside the main div I have some other stuff too, which are not very relevant here. Now, these divs have the following CSS classes.
#main {
width: 100%;
position: static;
z-index: 2;
overflow: hidden;
}
#content {
width: 100%;
height: 500px;
z-index: 3000; // This doesn't seem to help.
}
#overlayWrapper {
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000; // This needs to be at least 1000 for overlay to cover all elements in the page
position: fixed; // This seems to cause the problem?!
}
#overlay {
opacity: 1;
will-change: opacity;
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: transparent;
}
Now, this seems to work to some extend, as I see my overlay with the background-color value of rgba(0, 0, 0, 0.5) appearing on the screen.
The problematic part is that I cannot click on the stuff that are inside the iframe.
What I noticed is that this happens because of position: fixed style in the #overlayWrapper.
If I remove it, then I can click on the stuff from iframe but now the overlay is not visible any more.
Is it even possible to somehow keep the overlay but make the stuff on iframe clickable again?
I tried to add z-index: 3000; to iframe (i.e., to #content), but that doesn't seem to work.
Any ideas?
z-index only works on positioned elements. Which means the z-index that you applied to #content, which is the iframe, is not in effect.
#content {
position: relative;
z-index: 3000;
}
Here is the working jsfiddle.
PS: I added some links in #main to simulate the content you might have on your page.
It's because the z-index property of the div#main element should be placed before the the z-index of the div#overlayWrapper element.
Use position: relative on the <iframe> element because the z-index property gets in action with its relative.
#content {
width: 100%;
height: 500px;
/* This doesn't seem to help */
z-index: 3000;
position: relative;
}
How do you make a background img that would:
Stretch across the window horizontally
Have a fixed height
Crop height when it's bigger than the content's height (do not shrink)
Currently I have this code that implements #1 and #2 but I can't seem to make it do #3:
<img class="background" src="images/page-background.png"/>
html {
position: relative;
}
.background {
width: 100%;
height: 2800px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
I tried moving the img inside a div with overflow: hidden but that didn't work for some reason:
<div class="background-wrap">
<img class="background" src="images/page-background.png"/>
</div>
.background-wrap {
position: absolute;
width: 100%;
height: 1000px;
overflow: hidden;
z-index: -1;
}
How would you do this properly in CSS / HTML (without JavaScript)?
You could use a css background-image on a div like so:
.background-wrap {
background: url(images/page-background.png) no-repeat;
background-size: 100% 500px;
}
The background-size specifying that;
Stretch 100% across the window horizontally, and have a 500px fixed height (change this to auto if you want the image height to scale in proportion to the width).
Sorry guys, it turns out I completely forgot to remove a duplicate background <img> that I left after splitting my HTML in multiple files (actually PHP files but that's irrelevant).
For the sake of future reference, the following worked for me:
<html>
<head>...</head>
<body>
<div class="background-wrap">
<img class="background" src="images/page-background.png"/>
</div>
</body>
</html>
html {
position: relative;
}
.background-wrap {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
overflow: hidden;
z-index: -1;
}
.background {
width: 100%;
height: 2800px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
I have a question regarding the absolute position div.
I have something like
<div id='body-container'>
<div id='content-wrapper'>
contents....
</div>
</div>
I need to make my body-wrapper with absolute position because of other issues.
my css
#body-container{
position: absolute;
right: 0;
left: 0;
height: 100%;
overflow-y: hidden;
}
I have encounter a problem. Inside my content-wrapper, I have dynamic contents that will be added inside. It will create a unwanted scrollbar and the div become scrollable in that div. Is there anyway to kill the scrolling behavior? Thanks so much.
Remove the height property from your #body-container, and it will fit the content's height. No scrollbar.
http://jsfiddle.net/QeFe5/
EDIT
If you need the wrapper to be full height, then don't forget to set the top: 0 property, so the body won't create a scroll:
#body-container{
position: absolute;
right: 0;
left: 0;
top: 0;
background: silver;
height: 100%;
overflow: hidden;
}
Updated: http://jsfiddle.net/QeFe5/1/
This might work...
#body-container{
position: relative;
}
#content-wrapper{
position: absolute;
right: 0;
left: 0;
height: 100px; /* Need to put an exact height */
overflow: hidden;
}
If you need the content-wrapper to extend the full page you can use top and bottom with absolute positioning and make sure that your body-container (and it's enclosing containers) have height 100%.
#body-container{
position: relative;
height: 100%;
}
#content-wrapper{
position: absolute;
top: 0;
bottom:0;
right: 0;
left: 0;
}
I convert any div on my webpages to pop-up box by adding a class, turnIntoOverlay , to the div. (See JSFiddle)
.turnIntoOverlay {
position: fixed;
background-color: white;
top: 60px;
max-width: 680px;
z-index: 80;
border: 6px solid #BBB;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
max-height: 800px;
overflow: auto;
padding:10px;
}
Now when the pop up is displayed I also want to create a mask that puts up a faded layer(or mask) to the rest other page elements that appear below popup box. To create this mask, I resorted to pure css approach using psuedo selectors, so that the mask is shown/hidden simply when a popup box( a turnIntoOverlay element) is visible. I added the following css:
.turnIntoOverlay:after {
content: "";
background-color: whitesmoke;
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
top: 0;
left: 0;
}
Everything works fine except that the mask appears on the pop up as well even when I keep the z-index lower than of popup. Also to my surprise, it works only when z-index=-1.
Can you please suggest how to rectify this ?
See JSFiddle here
The problem is the stacking context. The :after content can not be below it's parent, except if the parent would be out of the stacking context which in your case is no option. z-index: -1 works because it's a special case and has priority over the parents content. That's why it does not effect the text, but effects background and border. See the list on Stacking Contexts. Your :after { z-index: -1 } is nr. 2 in the list.
Your only option would be using an additional wrapper:
<div class="turnIntoOverlay"><div>this div is convertible to pop up!<input/></div></div>
moving your current styles for .turnIntoOverlay to .turnIntoOverlay > div and applying the overlay to the outer div with a positive z-index:
.turnIntoOverlay:after {
z-index: 1;
}
Here is a demo.
Unfortunately IE8 and below are buggy on that. Also they do not know opacity and using -ms-filter does not work on elements without layout like pseudo classes :before and :after are.
Of course, if you'd use an additional wrapper anyway, you could just give the other wrapper the background-color. No need for :after then:
.turnIntoOverlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: skyblue; /* for old browsers */
background-color: rgba(135, 206, 235, 0.4);
}
Compared to the pseudo class approach, this includes a little fix for IE8 and below. Can be made even better by using a transparent png which is applied to IE. With that, it looks quite the same in every browser (after IE6 I would say).
Here is a demo.
My solution is to use both :before and :after to solve your problem:
.turnIntoOverlay {
position: fixed;
background-color: white;
top: 60px;
max-width: 680px;
border: 6px solid #BBB;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
max-height: 800px;
overflow: auto;
padding:10px;
z-index: 80;
}
.turnIntoOverlay:before {
content: "";
background-color: skyblue;
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.4;
top: 0;
left: 0;
}
.turnIntoOverlay:after{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
z-index: -1;
content: "";
}
JSFiddle
I took out the position: fixed from .turnIntoOverlay and now it works.