This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
Closed last year.
I’m trying to create an EMPTY div that takes up 100% of the viewport and that moves with the viewport (or position: fixed).
It also needs to be at top: 0, left 0 of the viewport. This is for a browser extension so I need this div to be added over any page.
The background reason for this is so I can use the div as a full page tooltip that shows the mouse x and y positions and the tooltip follows the mouse.
How can this full page div be achieved? My many attempts have failed to create a div with any height.
I am away from my pc but can add what I’ve tried already soon.
Try this
{
position:absolute;
inset:0;
width:100vw;
height:100vh;
}
first add an empty div to body then use this :
{position: fixed;
top: 0;
left: 0;
background: red;
right: 0;
z-index: 999999999;
bottom: 0;}
this pure css code is enough and you dont need any javascript even after resize.
.empty-div {
position: fixed;
inset: 0;
}
The inset property is a shorthand for top, right, bottom and left which will stretch the div to all corners.
In order to place the div at the very top, over everything else, it's best to insert the div at the very end of the page; just before the closing </body> tag.
To be on the safe side, you can also add z-index: 9999999.
Try this stylesheet and with some JavaScript code will help you to achieve a full page div.
#full-page-div {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: none
}
I have added the extra "overflow: none" because height may get more than browser window's height and we don't need to show the scrollbars.
Now, in the JavaScript code, we need to adjust the div height to the full page height, also need to add a handler to window "resize" event, so as to adjust that full page div height and width.
function ExtFullPageDivAdjust()
{
let fullPageDiv = document.getElementById("full-page-div");
fullPageDiv.style.height = Math.max(window.innerHeight, document.querySelector("body").clientHeight) + "px";
fullPageDiv.style.width = window.innerWidth + "px";
}
ExtFullPageDivAdjust();
window.addEventListener("load", ExtFullPageDivAdjust);
window.addEventListener("resize", ExtFullPageDivAdjust);
Try this
{
position: fixed;
height: 100vh;
width: 100vw;
}
Related
I am building a component that is supposed to slide up and down depending on some user action. The component must hold an image in the top which is positioned absolute, on a wrapper which is positioned fixed.
Everything is fine and dandy, however during the slide up and down effect, for which I am using jQuery, only the bottom half of the image is shown.
When the animation is over, the image is shown as it's supposed to do.
I have some CSS which looks like:
.wrapper {
background: #fff;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
height: 100px;
display: none;
}
.picture {
position: absolute;
top: -40px;
border-radius: 100%;
left: 50%;
transform: translateX(-50%);
}
I've made a fiddle here: https://jsfiddle.net/7sg3x6zn/
Any ideas on how to avoid this?
As others mentioned, you need to override the overflow: hidden that is set on the callback of both slideDown() and slideUp().
You can do that without changing your stylesheet, if you alter your code like that:
$(function() {
$('#show').click(function(event) {
event.preventDefault();
$('.wrapper').slideDown().css('overflow','visible');
});
$('#hide').click(function(event) {
event.preventDefault();
$('.wrapper').slideUp().css('overflow','visible');
});
});
add
overflow: initial !important;
to wrapper class like the example
https://jsfiddle.net/RACCH/ug7szyzv/
this is happening because the jquery function adds overflow:hidden during the animation..
The animation slideDown, and slideUp uses overflow: hidden on the wrapper element doing the animation.
And because of the negative top position of the images is outside the wrapper. So to avoid the image being cut in half delete the line: top: -40px
Hope this make sense :)
There are tons of questions on SO regarding vertical alignment, but I haven't discovered a clear answer to my problem.
I created a fiddle to show exactly what I'm trying to do.
HTML:
<div id="fade"></div>
<div id="fullscreen">
<img src="http://jira.seraphdevelopment.com/jmajewski/clean/uploads/pictures/n8jvxzd2476480d0.jpg" />
</div>
CSS:
#fade {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Transparent Background */
background-color: #000;
opacity: 0.50;
}
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
/* Adding the display: block allowed me to center
the image horizontally with the margin: auto. */
display: block;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
/* This didn't work for me. */
vertical-align: middle;
/* This didn't do anything, either. */
line-height: 100%;
}
I am trying to make a lightbox of sorts, such that the user will click on an image on the page, causing that same image to load up in fullscreen mode. The first div, fade, will be used to cover the entire page with a semi-transparent black background, essentially giving the effect of the page fading away, while also making things modal.
I wanted to be able to nest the image inside the fade div, but I ran into a problem. Setting the opacity on the outer div (to create the fade effect) caused my nested image to inherit the opacity value. Thus, I added a separate div that was identical to the first one, except without the background, and nested the image inside of that.
For the record, I did manage to figure out a workaround to the opacity issue, but I haven't yet implemented it. Credit to Blowski, a SO user who posted this answer to a question regarding opacity:
I do not want to inherit the child opacity from the parent in CSS
The long story short, I have tried quite a few things now in trying to get this image to be centered vertically, but to no avail.
Keep in mind, this solution needs to work with any image!
I am certainly capable of adding a line of code to the $(window).resize() function to center the image manually, but I would like to avoid doing so, if possible. I'm very curious to learn a way around this, as I seem to run into these types of issues more often that I'd like.
Bonus: Why is vertical alignment so difficult for a browser to perform?
Here is one way centering an image in a fixed/absolute positioned div using CSS.
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
}
The trick is to use position: absolute for the img and set all the offsets to 0, and then margin: auto will center the image.
The max-width and max-height values will work as expected.
The reason this works is that the image has intrinsic dimensions, so the CSS engine has specific values to do the necessary math to center the images both vertically and horizontally.
See demo at: http://jsfiddle.net/audetwebdesign/KG99S/
Comments
Note that this technique works independently of the overlay.
Also, this works regardless of the aspect ratio of the image.
Reference
This technique follows from the CSS2 specification regarding how the horizontal and vertical margins are determined for absolutely positioned inline, replaced elements.
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
and
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height
I would like to extend my div element to whole page but I dont want to set te scrollbars for page. I tired $(window).width and $(document).width but when i set this to my css the scrollbars appears. I cant add CSS width: 100% becouse other stuff in my application base on width in pixels not percents so it cant be done like this. Can anyone help me?
Create a #mydiv that contains everything and then :
#mydiv { position: absolute; bottom: 0; left: 0; top: 0; right: 0; overflow: hidden}
Should make it.
OK I fugred it out.
I set in CSS width: 100; height:100% and then by JS I get dimensions in pixels by $('#element').width()
I have something like this:
<body>
<div style="width:700px; margin:0 auto;">
<div class="inner-div"></div>
</div>
</body>
Is there a way to expand child div with class "inner-div", to 100% of body width?
This makes inner-div stretch from left to right:
div.inner-div {
position: absolute;
left: 0;
width: 100%;
}
This is an old post but I found a better solution here: How can I expand a child div to 100% screen width if the container div is smaller?
So in this case it would be
.inner-div {
width: 100vw;
margin-left: calc(-50vw + 50%);
}
I have not tested this but it might work:
You need jQuery for this.
//I'm using a resize event in case the body with changes. At least i think that will work.
window.onresize = function(event) {
var bWidth = $("body").width():
$(".inner-div").width(bWidth);
}
Not with css only. Since you set a with of 700px for the parent the child inherits this.
But you can do this with javascript. Here with jquery:
$(window).bind("load resize", function(){
$('.inner-div').width($('body').width());
});
It works even if you resize the window.
Let me correct this a little bit.
You also need to give your stretching element some "min-width" value in pixels/em and (not necessary but good practice) give the body element a min-width, too.
i.e.:
body {
min-width: 1000px;
}
.outer {
width: 1000px;
height: 200px;
margin: auto;
}
.inner {
position: absolute;
min-width: 1000px;
height: 100px;
left: 0;
right: 0;
}
If there is no min-width set and your HTML/CSS isn't built for a responsive site you can see an error at the inner DIV element when resizing the browser window. The property "width: 100%" makes the element stretch always to 100% browser window size. Therefore if the browser viewport gets smaller than the content and scrollbars appear, the inner DIV stays at the actual browser viewport size causing the appearance seems broken when you scroll the site.
You can try it here: http://jsfiddle.net/W4vum/
Try changing the "min-width" value at the ".inner" DIV in the example from 1000px to 100%, resize the window and scroll to the side, then you see it.
If you give width 100% to inner-div, it will fit the width of the outer div.
A little example of how to do it with css, so it is the same in javascript with setting the attributes I guess : http://jsfiddle.net/u8mJW/.
To make this work in pure CSS all parent elements have to be position:static;
(or without the position attribute, because static is default)
after that you can use Stefan's code
div.inner-div {
position: absolute;
left: 0;
width: 100%;
}
(corrected Ricola3D's Fiddle: http://jsfiddle.net/u8mJW/23/ )
Im using a float: right on my website. I want to make that div 100% of the window height minus a 10px margin. I want the height to resize with the page.
I also want the image in it to sit at the bottom of the 'container' minus 10px padding.
I've tried adjusting everything, and am sure its something in the code conflicting but i just can't work it out.
Thanks for any suggestions in advance.
I suggest you use absolute positioning instead of floating for this, you can make elements expand by setting for example top and bottom at the same time.
Absolute positioning could work for the image as well if you set its bottom to 10px (its offset parent will already be the right container, because any position other than the default static makes the element an offset parent).
Quick example:
/* this makes your body take up the whole screen */
html, body { height: 100%; }
/* the positioning magic */
#right { width: 100px; position: absolute;top: 10px; bottom: 10px; right: 20px; }
jsFiddle Demo
UPDATE: and an updated jsFiddle to show an example on putting another element in the container and positioning it to the bottom.
#image { position: absolute; bottom: 10px; left: 20px; }