html中的按钮元素的100%高度不起作用

use*_*265 4 html css

我在html中有一个button元素,如下所示,

<html xmlns="http://www.w3.org/1999/xhtml">
<head>  

</head>
<body style="height:100%;"> 
  <button id="chartContainer" style="height:100%;" >
  </button>          
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

我需要按钮来填充窗口的高度。调整窗口大小时,按钮应适应窗口大小。所以我已将按钮的高度指定为100%,但无法正常工作。

请参见下面的链接,图表元素将填充整个窗口,在调整窗口大小时,图表会以可用大小自动收缩

点击这里

是否可以将按钮填充到窗口大小?

提前致谢

Mr.*_*ien 5

不确定为什么要这样做,但是无论如何,答案是,您还需要height: 100%;为父元素设置。

html, body {
    height: 100%;
}

button {
    height: 100%;
    width: 100%;
}
Run Code Online (Sandbox Code Playgroud)

Demo


正如您评论的那样,为什么还需要元素的100%高度html,原因是,当您不对元素设置任何高度时,默认高度是auto,因此当您100%在子元素上使用时,它会失败,原因100%是什么?所以序,使这项工作,你需要设置height到父元素为好,因此现在你可以说,这button高度是100%,body而且body是100%,html并且html是视域的100%。