如何将按钮高度设置为视口高度

Question

我这样做是为了获取视口高度并将其设置为按钮高度

var viewportHeight = $(window).height();
var viewPortHeightStr = `\"${viewportHeight}px\"`
document.getElementById("button").style.height = viewPortHeightStr
console.log('viewPortHeightStr = '+viewPortHeightStr) // prints "750px"

控制台记录为"750px"但按钮的高度不受影响，但是可以正常工作

document.getElementById("button").style.height = "750px"

为什么？

这是按钮标签

<button id="button" class="btn-basic">x</button>

Answer 1

在CSS中很容易。 采用：

height: 100vh;

这意味着视口高度的100％。

在您的代码中，问题似乎是：

var viewPortHeightStr = `\"${viewportHeight}px\"`
// change it to:
var viewPortHeightStr = viewportHeight + 'px';

片段：

 var viewportHeight = $(window).height(); var viewPortHeightStr = viewportHeight + 'px'; document.getElementById("button").style.height = viewPortHeightStr console.log('viewPortHeightStr = '+viewPortHeightStr) // prints "750px" 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button" class="btn-basic">x</button> 

Answer 2

应该

document.getElementById("button").style.height(viewPortHeightStr);

代替

document.getElementById("button").style.height = viewPortHeightStr