关于javascript：将按钮的高度设置为窗口的百分比


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

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

1
2
3
#mybutton {
    padding: 10%;
}

但显然不能完全满足我的需要(此外，它对浏览器的大小没有响应)。

这不起作用：

1
2
3
#mybutton {
    height: 10%;
}

我也试过用 javascript 做这件事(我真的不掌握它)，但这两次尝试都没有奏效。

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

我该怎么做？

PS : 我也试过用固定值 (100px) 来看看我是否可以改变高度，但似乎我根本不能。

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

谢谢。

您可以使用视口单位：

1
2
3
#mybutton {
    height: 10vh;
}

所有现代浏览器都支持视口相对长度。

相关讨论

虽然选择了答案，但我想在这里说明三件事。

注意#1

1
2
3
#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

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

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

使用 css，你的按钮将是 parent container 的 X%，所以如果你有一个 parent container 和 300px height，你的按钮将是 30px height(使用 height: 10%)。

您也可以像@rnevius 指出的那样使用 vh 单元。但请记住，span 不会如您所愿，因为它不是 block 元素。 (除非你使用 display: (inline-)block 强制它)。

相关讨论

试着放一个 !important

1
2
3
#mybutton {
    height: 10% !important;
}

相关讨论