html - 在 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's calc() function :

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

JSFiddle demo .

理想情况下，您不应该使用内联样式。您应该将样式移至 a stylesheet :

div#map_canvas {
    ...
    width: calc(100vh - 200px);
}

我有一种感觉，你可能想为 height 而不是 width 这样做......在那种情况下只需更改 width 到高度。

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

JSFiddle demo using height instead of width .