Question

好的，所以我已经仔细阅读了本网站和其他多个网站上的这个和类似问题的每个答案，但似乎没有任何效果。我有一个基本的网页，上面有一张地图。我的任务是在浏览器窗口中全屏显示地图，而不是在计算机屏幕上全屏显示。下面是我正在使用的代码片段。我将宽度设置为100％并且工作正常。我尝试将我的高度设置为100％，但是当发生这种情况时，地图会从页面上消失。我也尝试将高度设置为自动，但这给我的结果与高度100％相同。关于如何解决这个问题的任何建议？

<style>
    #map {
        width: 100%;
        min-height: 100%;
</style>

Answer 1

尝试将此样式放入容器div，而不是映射本身。

<div class="container">
  map here
</div>

<style>
    .container {
        width: 100%;
        min-height: 100%;
</style>

Answer 2

您应该尝试为地图标记定义高度值。对于exaple：您在iframe代码中的地图代码，您应该为iframe代码定义高度值。

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set DIV Height to 100% Using CSS</title>
<style type="text/css">
    html, body {
        height: 100%;
        margin: 0px;
    }
    .container {
        height: 100%;
        background: red;
    }
</style>
</head>
<body>
    <div class="container">The height of this DIV element is equal to the 100% height of its parent element's height.</div>
</body>
</html>

Answer 4

为了让容器消耗整个屏幕，我更喜欢使用

.container {
    height: 100vh;
}

Answer 5

height: 100%表示元素占用其父容器的所有高度。通常，您应该使用：

body, html {
 height: 100%;
}

.container {
  height: 100%;
}

高度100％绝对不能正常工作

5 个答案: