高度 100% 绝对不工作 [重复]答案

【问题标题】：Height 100% Definitely NOT working [duplicate]高度 100% 绝对不工作 [重复]
【发布时间】：2018-10-21 04:10:55
【问题描述】：

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

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

【问题讨论】：

您的} 在哪里？ 100% 什么？你有没有把body设置成100%

标签： html css dictionary height

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您应该尝试为地图标签定义高度值。例如：您的 iframe 标签中的地图代码，您应该为 iframe 标签定义高度值。

【讨论】：

好的，我对此很陌生。我想我了解 iframe 标记的工作原理，但源代码来自哪里？
你应该为容器设置高度值 100%。

【解决方案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>

【讨论】：

你能解释一下这里发生了什么吗？

【解决方案4】：

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

.container {
    height: 100vh;
}

【讨论】：

【解决方案5】：

height: 100% 表示元素占据其父容器的所有高度。一般来说，你应该使用：

body, html {
 height: 100%;
}

.container {
  height: 100%;
}

【讨论】：