当前位置: 首页 > 知识库问答 >
问题:

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

卢出野
2023-03-14

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

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

共有3个答案

慕容高卓
2023-03-14
<!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>
罗智志
2023-03-14

您应该尝试定义地图标记的高度值。例如:您的地图代码在iframe标记中,您应该为iframe标记定义高度值。

何灼光
2023-03-14

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

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

<style>
    .container {
        width: 100%;
        min-height: 100%;
</style>
 类似资料:
  • 问题内容: 我最近发现了一个使用绝对位置div的站点,其上,左,右和下限值均设置为0。这创建了100%高,100%宽的div。我现在也在使用此功能,并且想知道是否有任何理由不这样做? 它确实运行良好,这是一个简单的解决方案,而我使用的另一种方式则存在无法修复的错误。我正在使用的应用程序应该只占用浏览器窗口的任何位置,并且永远不需要更大。 问题答案: 我现在也在使用此功能,并且想知道是否有任何理由不

  • 但是,它在Safari中并不起作用。但是如果我们将中的高度从更改为,我们将观察到拆分器(从上到下到)变得可拖动。这意味着在Safari中不起作用。 有没有人知道如何修改代码,使拆分器在Chrome和Safari中都能工作? 编辑1:

  • 问题内容: 我使用此 CSS将最大高度设置为 谁能给我一个普遍的答案, 和 之间有什么区别? 问题答案: 这是W3Clink的解释: 以下算法描述了两个属性[min-height和max-height]如何影响’height’属性的使用值: 临时使用的高度是根据上面“计算高度和边距”下的规则计算的(不包括“最小高度”和“最大高度”)。 如果此暂定高度大于“最大高度”,则会再次应用上述规则,但是这次

  • 问题内容: 我使用占用所有可用空间的第三方组件,即width=100%和height=100%。我没有控制权。 我正在尝试使其适合以下布局,但是它height=100%不起作用(我希望第三方组件占据所有绿色空间)。 为什么?您将如何解决? 问题答案: 通常,对于使用percent on height来获取其父代的高度的元素,父代需要的高度不是auto或定位为绝对高度,否则height将计算为aut

  • 问题内容: 我有一个div,我要填充整个身体高度,而不要填充以像素为单位的设定值。但是我不能上班。 我要执行此操作的原因是,我的元素具有基于某些不同标准的动态高度,例如,标头的高度根据其可以包含的不同元素而变化。然后,内容div需要扩展以填充剩余的可用空间。 但是,div元素保持内容的高度-好像并不能将100%解释为body元素的高度。 我将不胜感激任何帮助或朝着正确方向的指点。 问题答案: 您需

  • 我正在尝试强制块具有最小高度。但什么都没有继续发生。如果我使用高度而不是最小高度,那么高度有效,但固定。 FOP 合规性页面声称支持已完成,所以我想我做错了。https://xmlgraphics.apache.org/fop/compliance.html