Develop Reference

Setting the height of a button as a % of the window

I'm trying to set the height of a button as a % of the user's window. It seems this works :
#mybutton {
padding: 10%;
}
But obviously doesn't quite achieve what I need (in addition, it's not responsive to the browser's size).
This doesn't work :
#mybutton {
height: 10%;
}
I've also tried doing it with javascript (I really don't master it), but none of those two tries work either.
document.getElementById('mybutton').style.height = "10%";
document.getElementById('mybutton').style.height = window.outerHeight / 10;
How can I do that ?
PS : I've also tried with fixed values (100px) to see if I could change the height, and it seems I can't at all.
NB : I'd like it to be responsive to the user's window, meaning that if I reduce the size of my browser, the button should keep a height of 10% of it.
Thanks.

You can use viewport units:
#mybutton {
height: 10vh;
}
Viewport-relative lengths are supported by all modern browsers.

Though the answer has been selected I wanted to note three things here.
Note #1
#mybutton {
height:10%;
}
does not work because the height is relative to the parent and the parents, html and body, are not 100%. Checkout this fiddle, http://jsfiddle.net/3sLafksx/1/
Note #2
The reason padding worked is because padding is not relative to the parent's height but to the parent's width. Which in case of a div element or plainly in the body is 100% of the window size.
Refer: https://stackoverflow.com/a/8211457/1799502 and http://www.w3schools.com/cssref/pr_padding.asp
Note #3
Using the viewport height vh and viewport width vw units is a very good idea but #rnevius was not kidding when he said all modern browsers, you need at least IE9 or Android 4.4

IF your element is a span, it won't work like you wish, but using a div, your code will work.
document.getElementById('b').style.height = (window.outerHeight / 10) + 'px';
Using css, your button will be X% of your parent container, so if you have a parent container with 300px height, your button'll be 30px height (using height: 10%).
You can also use the vh unit like #rnevius pointed out. But remember that a span won't work as you want, because it isn't a block element. (unless you force it by using display: (inline-)block).

Try putting a !important
#mybutton {
height: 10% !important;
}

Re size iframe based on width of window

I have an iframe embedded in a third party website, which I cannot edit in any way.
I want the iframe to re-size according to the width of the window.
If I was able to edit the whole page, this would not be a problem.
However, when setting the size of an element in %, it uses the parent of that element to size from. In the case of the page I am working with, the parent elements do not re-size, so this does not work.
What I need, is a way of telling the iframe to re size, based solely on the width of the window, and preferably using only CSS.
Is this possible using only CSS? If not is it possible using JQuery or JavaScript?

Try this:
http://jsfiddle.net/6aLxaag8/2/
This jsfiddle loads a second jsfiddle in the iframe.
There's a hardcoded style attribute on the IFrame that sets the width; 100vw or 100% of the width of the viewing window in which the element sits, regardless of it's position in the DOM. As you don't have access to the parent page you'll need to use a style attribute and you may not be able to use javascript to add it (check cross site scripting).
Support isn't perfect with vw units, but it's close.
PS, it's hard to know if this will work without trying it in your context, please let me know :-)

I have encountered that problem before and I use this css trick, this adjust to the width & height of any wrapper/div so if you have embed an iframe inside a div with 'height: 620px' and 'width: 420px' the iframe size adjust to the div's height and width. Just change both width & height of the div to 100% percent.
.content_here {
width: 420px;
height: 620px;
}
iframe#iframecontent {
display:block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
<div class="content_here">
<iframe id="iframecontent" src="http://www.bootstrapcdn.com/" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto"></iframe>
</div>

fix div when window resize

I have a div that has fixed position and bottom 0 to display at the bottom of the window.
My problem is when window resize, this div move to up and into other elements. For example when I open console box in chrome this div jump to other elements in facebook fix position such as friend list, when I open console box, element jump to up but hidden up element.
Please help me how I can fix div in window resize.

CSS Position Fixed:
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and doesn't move
when scrolled. When printing, position it at that fixed position on
every page. Fixed positioning is similar to absolute positioning, with
the exception that the element's containing block is the viewport.
This is often used to create a floating element that stays in the same
position even after scrolling the page. - by Mozilla MDN
In other words, When you use position: fixed; that takes elements out of the document's regular flow.
How I can fix div in Window Re-size?
Solution: There's no way to do it as you want using CSS. You must remove position: fixed; because when you set bottom: 0px with position: fixed; to your element then it doesn't matter that what is the size (vertical) of your browser or window because position: fixed; element will always appear on the bottom of the viewport screen at 0px.

You can use
position: fixed
or
`position:absolute`

Responsive Galleria

I'm trying to use this plugin Galleria in its responsive mode, which basically means it will re draw itself based on its container size as the window re-sizes. The demo on the link I've provided shows a really good example. You can see that, as you resize your window, the whole gallery adjusts accordingly. Now my issue is, the plugin won't let me initialize the gallery unless a height has been specified for the DOM element that is used as its container. This means, I've had to write a whole lot of javascript code to respond window resizes - it destroys the point of it having a responsive mode quite a bit - but in the website above, nowhere can I find an explicit height specified. Can someone explain to me where I'm going wrong?

I figured it out by myself. Posting my answer -
When initializing the gallery - specify your height in percentages - as below. I'm guessing it takes 50% of window height as its value in this case. This way, you don't need to explicitly specify heights anywhere and it works as advertised
Galleria.run('#gallery', {responsive:true, height:0.5, debug:false});

Galleria needs a height to initialise correctly. You can do this either via CSS or JS.
If you would like it to fill the width and height of the screen, I would recommend setting a width and height of 100% via CSS. And its parent container needs to be 100%. See below.
**JS:**
Galleria.run('#galleria', {
responsive:true,
showCounter:true,
thumbnails:false,
trueFullscreen:true,
});
**CSS:**
#galleria{
width:100%;
height: 100%;
position: fixed;
z-index: 9999;
top:0px;
bottom: 0px;
}
body,html{
height:100%;
width:100%;
}

The height option ( if it's < 2.0) is relative to the width of the container. So height:0.5 would have a height that is half the width of the container (w=2, h=1).
height:1.5 would result in (w=2, h=3)
To keep it responsive you can use max-width rather than width when styling the container.
If the height option is set to 2.0 or more, it is interpreted as pixels. So height:2.0 will only be 2px tall.

Changing Iframe Width/Height in Javascript Based on Anchor Point

Ok, I deal with this all the time in flash but I'm kind of lost in how to accomplish this in Javascript and CSS. I have an iframe (which by definition doesn't have an overflow property) whose width/height i'm trying to modify. Is there an easy way to change this value relative to a certain anchor point? Basically I have an ad that has a contracted and expanded state. If the expanded state expands leftward or upward, how can i modify the width/height in such a way to display the entire contents of the ad?

You can absolutely position your ad and anchor it with bottom and right:
.ad {
position: absolute;
bottom: 0;
right: 0;
}
Then when you increase the height and width, it will expand upwards and leftwards.