I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed.
I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 (resize browser height)
<body>
<div></div>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
height: 100%;
width: 130vh;
margin: 0 auto;
background: #f0f;
}
However, I worry about fallback for IE8 and Safari, as it this unit is not supported there.
Are there any other CSS only methods of achieving this effect?
I have a solution that works also with IE8 (using Pure CSS 2.1), but not perfectly.
because I need the browser to recalculate things when he get resized, and apparently it doesn't do that unless he has to (and I cant find a way to make him think he has to), so you will have to refresh the page after resizing.
as far as I know, the only element that can scale reserving his ratio is an <img>, so we will use the <img> to our advantage.
SO, we are going to use an image with the ratio that we want (using the services of placehold.it), lets say we want a 13X10 ratio (like in your example), so we'll use <img src="http://placehold.it/13x10" />.
that image will have a fixed height of 100% the body, and now the width of the image scales with respect to the ratio. so the width of the image is 130% height of the body.
that image is enclosed within a div, and that div has inline-block display, so he takes exactly the size of his content. witch is the size you want.
we remove the image from the display by using visibility: hidden; (not display:none; because we need the image to take the space), and we create another absolute div, that will hold the actual content, that will be right above the image (100% width and 100% height of the common container).
That works perfectly when you first initiate the page, but when you resize the page, the browser doesn't always measure the right width and height again, so you'll need to refresh to make that happened.
Here is the complete HTML:
<div class="Scalable">
<img class="Scaler" src="http://placehold.it/13x10" />
<div class="Content"></div>
</div>
and this simple CSS:
html, body, .Content
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.Scalable
{
position: relative;
display: inline-block;
height: 100%;
}
.Scaler
{
width: auto;
height: 100%;
margin-bottom: -5px;
visibility: hidden;
}
.Content
{
position: absolute;
top: 0;
background-color: black;
}
Here's a Fiddle (don't forget to refresh after resizing)
I recommend you to copy this code to your local machine and try it there rather then within the fiddle.
In this similar SO question a CSS technique was found and explained on this blog entry that allows an element to adjust its height depending on its width. Here is a repost of the code:
HTML:
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
Demo Here
If this is sufficient for you, I'd recommend this technique. However, I'm unaware if the technique can be adapted to handle scenarios where you must have an element adjust its width depending on its height.
You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
Related
Im using css to resize an iframe in order to maintain the aspect ratio of the iframe (as described here : Responsive video iframes (keeping aspect ratio), with only css?).
.iframe-wrapper {
position:relative;
width:100%;
height: 0;
padding-bottom:58%;
}
.iframe-wrapper iframe {
position:absolute;
left:0;
top: 0;
height: 100%;
width: 100%;
}
However, the problem i am facing is that for very wide screens this causes the iframe height to be large and the user has to scroll to view the content, which i want to avoid. So i am looking for a way to set a maximum value for.iframe-wrapper padding-bottom based on the viewport size. Something like this but for the bottom-padding:
max-height: calc(100vh - 200px);
Is there a way to do this?
Thanks :-)
If you want to maintain the same ratio then you could add a max-width of the screen height / your ratio (as the padding-bottom is dependant on the width) to a container div:
.container {
margin: 0 auto;
max-width: 178vh;// 100 / 56
}
.framewrapper {
background: pink;
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
}
.framewrapper iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
<div class="container">
<div class="framewrapper">
<iframe src="http://blar.com" width="20" height="10" scrolling="no"></iframe>
</div>
</div>
If not you would have to add a media query and fix the padding to 100vh, but then the ratio won't stay the same.
As elements with the padding-bottom trick are unaffected by the max-height property, the most efficient way to do this is to create a media query that switches the element to a different aspect ratio depending on your current browser width, like so:
.iframe-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 58%;
}
.iframe-wrapper iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
#media (min-width: 1200px) {
.iframe-wrapper {
padding-bottom: 40%;
}
}
Recently I came across an situation of such issue of padding by % or max-padding. I found a very useful hackish way ... using of transparent image.
How it works? Foremost, I must say to use this method u need to set/definite max width/height which the container will go.
Example: You have 800x600 container + left/right padding of 50px(max)
Create 50x600 transparent image(s) ... duplicate if u need for both side.
Float your contend + padding(s) accordingly
Set padding(s) to 100% height
You now have responsive padding that scale with your main container
is there any way to make single page website without position absolute? Because when I want to variable height of containers, absolute position is little bit awkward. I mean when I insert more content to one container, the other above it should move down. I've tried position static and relative, but it didn't work for me.
Now my css looks like:
<style>
#header {position: absolute; top: 0; left: 0; width: 100%; height: 20%;}
#main {position: absolute; top: 20%; left: 0; width: 100%; height: 80%;}
#about {position: absolute; top: 100%; left: 0; width: 100%; height: 100%;}
#contact {position: absolute; top: 200%; left: 0; width: 100%; height: 50%;}
</style>
<body>
<div id="header">
content....
</div>
<div id="main">
content...
</div>
<div id="about">
long content which is covered with next div, because its "top" atribute settings
</div>
<div id="contact">
div which covers previous one's end
</div>
But when some container needs to be longer, problem is here..
Thanks for any help!
That depends on the style of your website. Of course you can set up anchors and have a one-page scrolling website, but I don't think that answers your question.
My suggestion is to try using absolute positioned elements as containers, and have your actual template inside them.
It would help if you provided some actual code or a specific issue you're having, as it's currently too vague.
I'll provide an answer to what I think you might be asking, though it isn't clear. I hope this isn't too basic.
Ditch the position property altogether.
Just have a div (which is by default 100% width) as your header at the top of your html. The content should be in another div below that.
Divs by default have 100% width, and their height is dependent on the height of their content. They will grow to accommodate taller content. These behaviors are because they have the property display:block .
You've used % which, if I remember correctly, is relative to the parent element. vh (viewport height) is relative to the height of the screen (100vh is the full height of the screen).
I added the background-color just so it's easier to see.
<style>
#header {
background-color: #777;
height: 20vh;
}
#main {
background-color: #999;
height: 80vh;
}
#about {
background-color: #777;
height: 100vh;
}
#contact {
background-color: #999;
height: 50vh;
}
</style>
I have a div with a background image that will overlay part of the header slideshow. I want the width of the div to always be 100% of the window size, even when the user re-sizes it. The height should change based on the aspect ratio of the background image. The dimensions of the background image is 1500x406.
Here's the sample code:
HTML
<div id="wrapper" class="clearfix">
<div id="bg_img"></div>
</div>
CSS
.clearfix {
width: 100%;
position: relative;
display: block;
margin: 0;
padding: 0;
border: 0;
line-height: 1.5;
}
#bg_img {
background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat;
position: absolute;
z-index: 100;
top: 9em;
width: 100%;
height: 406px;
margin: 0 auto;
display: inline;
}
The working JSFiddle
To make an element maintain proportions you only have to use this code
<div id="some_div"></div>
#some_div:after{
content: "";
display: block;
padding-top: 100%; /* the percentage of y over x */
}
So this is how to achieve it. Demo
<div id="wrapper">
<div id="bg_img"></div>
</div>
<div class="clearfix"></div>
N.B. clearfix isn't required for this solution, OP had it in his code.
CSS
#wrapper{
position: relative;
width: 100%;
}
#wrapper:after{
content: "";
display: block;
padding-top: 27.06666%; /* 406 over 1500 */
}
#bg_img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(http://placekitten.com/1500/406);
background-size: 100% 100%;
}
This is what I've used in the past to support back to IE8. Used in conjunction with a small js plugin here that supports the filters: http://louisremi.github.io/jquery.backgroundSize.js/demo/
img {
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='cover');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='cover')";}
background-position:50% 0;
}
I found a solution which is simple and works great for me. Create a transparent PNG for the aspect ratio you desire, e.g. 15px x 4px.
put the image within the div. Set the image's width to 100%. It will expand to the div's width and grow in the proper aspect ratio vertically, pushing the div's height down to the proper aspect ratio.
Something like this (this exact sample untested):
<div style="width: 100%">
<img src="..." style="width: 100%" />
</div>
You could, of course, do this with the other dimension (height) as well by defining it instead of width.
Simple enough. Works for me.
--
Andrew
This somewhat distorts the image, but it might be what you are looking for:
#bg_img {
background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat;
min-width:100%;
min-height:100%;
background-size:cover;
}
Redesigning my website, in my CSS I have a div of height: 200px; then an image under it with a height: 532px; then lastly a div of height: 100%;.
The last div is not filling the rest of the page, is there something I'm doing wrong?
P.S. - All divs are in a container. All containing divs have height: 100%;
I have since changed it, so I no longer require this.
First, you need to set the height of html and body to 100%.
Then if you want to cover the rest of the page with that div you should do something like:
div{
height: -moz-calc(100% - 732px); //732 = 200 + 532
height: -webkit-calc(100% - 732px);
height: calc(100% - 732px);
}
Hope this will help....
You really need to post your html.
I suspect that the problem you are having though could be solved by setting the height of the html and body tags to be 100% too. Like :
html, body{
height:100%;
}
If the div did indeed obey the height: 100%, it would have the same height as the container, conflicting with the elements above it.
Without using Javascript to compute the height, or note widely supported modern CSS extensions, you must fall back to absolute positioning. The only down side is you must manually enter the top of it.
http://jsfiddle.net/NnD2u/
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
</div>
.
.container { height: 500px; background-color: Yellow; }
.child1 { height: 200px; background-color: Green; }
.child2 { background-color: Red; }
.container { position: relative; }
.child2 { position: absolute; bottom: 0; left: 0; top: 200px; right: 0px; }
I'm trying to create an invisible div, over the facebook comments plugin in order to disable the plugin's functionality in an Editor View. This invisible div works in all browsers except IE8. How can I fix this?
HTML:
<div id="container">
<div id="coveriframe"></div>
<div data-bind-component="fbml: fbml">(RENDER JS COMMENTS VIA KO)</div>
</div>
Try in IE8:
http://jsfiddle.net/pkbz4/19/
The above code works in ALL other Major browsers. WTF Microsoft?
Stylesheet:
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#coveriframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#coveriframe {
z-index: 10;
}
I've done this several times in IE8. The solution that works for me is to assign a background color to the div and then set opacity to 0. IE8 then recognizes the div as "existing" above the rest of the content. I also find setting position: absolute and all four directions to 0 is more reliable than 100% width and height. Like this:
#coveriframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3007;
background: #fff;
filter: alpha(opacity=0);
opacity: 0;
}
Here's my update to your jsfiddle: http://jsfiddle.net/pkbz4/21/
CSS Specification says:
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.
Basically, In older versions of IE (including IE8) percentage heights are based on the height of the parent element. If the parent element doesn't have an explicit height, the percentage is ignored and set to Auto (in this case, 0px).
So, to fix this, you'll either want to explicitly set the height/width of #coveriframe or its parent. One thing you could try is setting the height of html and body to 100% (I'm assuming those are the parent elements).
html, body { height:100%; }
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#coveriframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#coveriframe {
z-index: 10;
}
why did you want to do in javascript and it works well in all browsers, I'll let my example I hope you work:
-----------------DIV-----------------
<div id="div1" style="display: block;">
<div class="mainbody">
<br />
</div></div>
-----------------JavaScript----------------
function showHideDiv(divX) {
if (divX == "1") {
document.getElementById("div1").style.visibility = "visible";
document.getElementById("div2").style.visibility = "hidden";
}
-----------------button HTML----------------
<li>click_Aqui</li>
The problem is that internet explorer up to ie9 doesn't recognize the mouse hover when hovered over a transparent background. Zach Shipley answer offers a good solutions.
But in case you want to add a border or an element to the transparent div or text the easiest way of doing this is by adding a 1px transparent png as background.
#coveriframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3007;
background-image: url("pixel-transparent.png");
}
Make sure that you are putting fixed height & width to that DIV.
As Shaquin Trifonoff mentioned above sometimes 100% or any length in % may not work onIE8. Always I am trying to avoid % in such situation.
Code snippet :-
html,body{ //This makes your page expandable as per screen resolution
height:100%;
}
#your-hide-div{
height:100px;
width: 100px;
display:block;
}