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

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

您可以使用视口单元:

#mybutton {
    height: 10vh;
}

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