#loading {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
in ie >= 7 it’s works perfectly, but in ie6 height equal line height
Is it a block you want to fill the window? Then you have to set the height of the html and body tag too.
html, body {
height: 100%
}
Related
The resizing of the background happens due to the popping in/out of the browser bar on the phone. How can I prevent this issue?
CSS
html {
overflow: hidden;
height: 100%;
}
body {
font-family: "Roboto", sans-serif;
height: 100vh;
width: 100%;
overflow: auto;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
width: 100%;
min-height: 100%;
z-index: -1;
object-fit: cover;
}
I have tried messing with with width, height and position values to no success.
Fixed. Had to change video height to:
height: 100vh
This pen probably explains my problem best:
http://codepen.io/anon/pen/xwQpLy?editors=110
I'm using the following trick to keep the box constrained to a 1:1 ratio:
.squarebox {
position: relative;
width: 100%;
}
.squarebox::before {
padding-bottom: 100%;
content: "";
display: block;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
But, I'd like the box to always fill the parent's width or height, whichever is smaller. In the above example, the box only ever fills the parent's width.
Do you mean like this?:
http://codepen.io/anon/pen/yYQpqp?editors=110
The parent needs to be position:relative, the .content div needs to be width:100%; height:100%; as well as position:relative with top, right, bottom and left set to 0.
I stripped out the squarebox div.
.squarebox {
position: relative;
width: 100%;
}
.content {
width:100%;
height:100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:orange;
}
I wish to achieve the following effect, regardless browser (re)size:
The images are set to be flexible, so, each of them as a max-width declared as:
100%.
http://jsfiddle.net/rgdrqbg4/
The css:
img {
max-width: 100% !important;
vertical-align: middle;
}
.home-video {
position: relative;
width: 57.291666666667%;
}
.video-placeholder {
position: relative;
left: 0;
top:0;
}
.play-video {
position: absolute;
left: 32.545454545455%;
top: 22.508038585209%;
}
Can someone please point some directions, or name some common used techniques to overlay two images while keep them absolute centered, regardless the viewport width?
A common technique is to set top and left to 50% and set margin-top and margin-left negative half of the height and width of your image.
Try this:
.play-video {
position: absolute;
top: 50%;
left: 50%;
margin-top: -90px;
margin-left: -97px;
}
Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/1/
UPDATE
You can also set top, left, right, and bottom to 0 and set margin to auto for it to auto calculate the margin needed to center the image.
.play-video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/5/
This will only work if the image inside is smaller than the image that is wrapping it.
UPDATE
You are setting width for .home-video. At some point in the viewport, the container has more width than the image so the black box is centering accoring to the container, not to the parent image. To make the .home-video container have the same width as its larger image you can use this:
I added a width of 30% to the black box so it can shrink with the larger image too.
.home-video{
display: inline-block;
}
.play-video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 30%;
margin: auto;
}
And remove the width you set before.
Working JSFiddle sample: Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/9/
img {
max-width: 100% !important;
vertical-align: middle;
}
.home-video {
position: relative;
width: 57.291666666667%;
}
.video-placeholder {
position: relative;
left: 0;
top:0;
}
.play-video {
position: absolute;
left: 32.545454545455%;
top: 25.508038585209%;
width: 34%;
height: 40%;
}
<div class="home-video">
<img class="video-placeholder" src="http://lorempixel.com/570/320/" alt="video"/>
<img class="play-video" src="http://lorempixel.com/194/180/cat/" alt="play this video"/>
</div>
Do you mean like this? You were on the right track.
.play-video {
position: absolute;
top:20%;
height:inherit;
left:28%;
width:40%;
margin:0 auto;
}
http://jsfiddle.net/rgdrqbg4/7/
I want my div.container to be 100% height to fill the whole screen.
I've tried a few things, min-height, body height 100% and all of them seperate but it just won't work.
Here is the link : http://jquery.colinvaneenige.nl/test/
So .container with 100% height while still being in the center of the page! :)
Thanks in advance,
You can make it position: absolute at set the top and bottom to 0:
#container {
width: 400px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: red;
margin: 0 auto;
}
Fiddle Demo 1
..or
body,html {
min-height: 100%;
height: 100%;
}
#container {
width: 400px;
height: 100%;
background: red;
margin: 0 auto;
}
Fiddle Demo 2
Using position: absolute and set height: 100% instead of min-height.
.container {
position: absolute;
height: 100%;
}
You then will have to use other CSS tricks to get it back to centered, such as let's say your width of the container is 1000px:
.container {
width: 1000px;
left: 50%;
margin-left: -500px; /* negative half of the total with of the container */
/* And code from above line */
position: absolute;
height: 100%;
}
I've only ever been successful with this by creating a table with a single cell that is 100% height, then placing your div within that.
It's not possible, height must be in pixel :/
Only % for width :)
You can make a " min-height: 100px; "
I have a fixed div setup using this:
.box {
position: fixed;
width: 600px;
bottom: 20px;
left: 50%;
max-height: 400;
overflow:auto;
}
The problem I have is that on internet explorer it ignores the max-height, the div just expands upwards and out of view with no scroll bars, even if I set overflow: scroll;.
BTW I am using the hack to do fixed absolute position boxes so they stay on the screen reguardless of scrolling, if that matters:
* { margin: 0; }
* html .box { position: absolute; }
try this:
* html .box{
height: expression( this.scrollHeight > 399 ? "400px" : "auto" ); /* fix for ie 5+ */
}
.box {
max-height: 400px;
position: fixed;
width: 600px;
bottom: 20px;
left: 50%;
overflow:auto;
}