关于CSS：使用window.innerHeight在HTML中设置div高度


Use window.innerHeight to set div height in HTML

我有三个div元素(页眉，中间和页脚)，我想将页眉和页脚固定为100px的高度，中间部分要根据窗口内部高度设置动态高度。

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

1
 
相关讨论

window.innerHeight是JavaScript，而不是CSS。

如果希望#map_canvas元素的宽度为100vh(请参见视口百分比长度)减去200px，则可以使用CSS的calc()函数：

1
 

JSFiddle演示。

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

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

我觉得您可能想对height而不是width进行此操作。在这种情况下，只需将上面的width更改为height。

1
 

使用height而不是width的JSFiddle演示。

相关讨论

您是否期望这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    InnerHeight
    <style>
    #header{
        height: 100px;
    }
    #content{
        background: gray;

    }
    #footer{
        height: 100px;
    }
    </style>
    <script src="jquery.js">
</head>
<body>



<script type="text/javascript">
    $(document).ready(function(){
        $('#content').css('height',$(document).innerHeight()+200)
    });

</body>
</html>