Menu
i am having a button element in html as below,
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body style="height:100%;">
<button id="chartContainer" style="height:100%;" >
</button>
</body>
</html>
i need the button to fill up the window in terms of height. On resizing the window, button should adapt itself to the window size. so i have specified height of the button to 100%, but it is not working.
See the below link in which the chart element fill the entire window, on resizing the window, the chart shrink itself with the avaible size
Click here
Is it possible to fill up the button to window size?
Thanks in advance
663
Not sure why you want to do that, but anyways, the answer is, you need to set the height: 100%; for the parent element as well.
html, body {
height: 100%;
}
button {
height: 100%;
width: 100%;
}
Demo
As you commented that why you need 100% height for html element as well, the reason is, when you don't set any height to elements, the default height is auto and hence when you use 100% on child elements, it fails, because 100% of what? So inorder to make that work, you need to set the height to parent elements as well, hence now you can say, that button height is 100% of body and body is 100% of html and html is 100% of the viewport.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
