将按钮的高度设置为窗口的百分比

Question

我正在尝试将按钮的高度设置为用户窗口的％。这似乎有效：

#mybutton {
    padding: 10%;
}

但显然不能完全满足我的需求（此外，它不能响应浏览器的大小）。

这不起作用：

#mybutton {
    height: 10%;
}

我也尝试过使用javascript（我真的不掌握它），但这两个尝试都没有。

document.getElementById('mybutton').style.height = "10%";
document.getElementById('mybutton').style.height = window.outerHeight / 10;

我该怎么做？

PS：我也试过固定值（100px）来看看我是否可以改变高度，而且似乎我根本不能。

注意：我希望它能够响应用户的窗口，这意味着如果我缩小浏览器的大小，按钮应该保持10％的高度。

感谢。

Answer 1

您可以使用viewport units：

#mybutton {
    height: 10vh;
}

视口相对长度为supported by all modern browsers。

Answer 2

虽然已经选择了答案，但我想在这里注意三件事。

注意＃1

#mybutton {
    height:10%;
}

不起作用，因为高度相对于父级而父级html和body不是100％。看看这个小提琴，http://jsfiddle.net/3sLafksx/1/

注意＃2

padding工作的原因是因为填充不是相对于父级的高度而是相对于父级的宽度。如果div元素或body中的明显元素，则为100％的窗口大小。

参考： https://stackoverflow.com/a/8211457/1799502和http://www.w3schools.com/cssref/pr_padding.asp

注意＃3

使用视口高度 vh 和视口宽度 vw 单位是一个非常好的主意但是当他说所有现代浏览器时，@ rnevius并不是在开玩笑，你至少需要IE9或Android 4.4

Answer 3

如果您的元素是span，它就不会像您希望的那样工作，但使用div，您的代码就可以使用。

document.getElementById('b').style.height = (window.outerHeight / 10) + 'px';

使用css，您的X%按钮将为parent container，因此如果parent container 300px height 30px height，则按钮将为{{1} （使用height: 10%）。

您也可以像@rnevius指出的那样使用vh单位。但请记住，span无法按照您的意愿工作，因为它不是block元素。 （除非你使用display: (inline-)block强制它。）

Answer 4

尝试添加！important

#mybutton {
    height: 10% !important;
}