Question

我有3个div，我想用100px高度固定页眉和页脚，并且midle具有与窗口内部高度相关的动态高度。我用html写了下面的线，但它不起作用。有人可以帮忙吗？非常感谢。

<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更改为height }。

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

JSFiddle demo using height instead of width

Answer 2

你期待这样吗

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>InnerHeight</title>
    <style>
    #header{
        height: 100px;
    }
    #content{
        background: gray;

    }
    #footer{
        height: 100px;
    }
    </style>
    <script src="jquery.js"></script>
</head>
<body>
<div id='header'></div>
<div id='content'></div>
<div id='footer'></div>
<script type="text/javascript">
    $(document).ready(function(){
        $('#content').css('height',$(document).innerHeight()+200)
    });
</script>
</body>
</html>

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

2 个答案: