在 HTML 中使用 window.innerHeight 设置 div 高度

Question

我有三个div元素（页眉、中间和页脚），我想将页眉和页脚的高度固定为 100px，中间的高度根据窗口内部高度具有动态高度。

我尝试了以下操作但没有成功：

<div id="header" style="background-color:white;width:100px; height:12vh; margin: 0; padding: 0 ;border:0;"></div>
<div id="map_canvas" style="background-color:black;width:window.innerHeight-200;height:78vh;margin: 0; padding: 0 ;border:0"></div>
<div id="footer" style="background-color:white;width:100px; height:10vh; margin: 0; padding: 0 ;border:0;bottom:0px"></div>

Answer 1

window.innerHeight是 JavaScript，不是CSS。

如果您希望#map_canvas元素的宽度为100vh（请参阅Viewport-percentage lengths）减去 200px，您可以使用CSS 的calc()函数：

<div id="map_canvas" style="...width: calc(100vh - 200px);..."></div>

JSFiddle 演示。

理想情况下，您不应该使用内联样式。您应该将样式移至样式表中：

<div id="map_canvas" style="...width: calc(100vh - 200px);..."></div>

我有一种感觉，您可能想这样做是为了height，而不是width......在这种情况下，只需将width上面更改为height。

<div id="map_canvas" style="...height: calc(100vh - 200px);..."></div>

JSFiddle 演示使用height而不是width.