div位置绝对高度不起作用
基础概念
div 是 HTML 中的一个块级元素，通常用于布局和样式设置。通过 CSS 可以设置 div 的位置和高度。绝对定位（absolute positioning）是指元素相对于最近的非 static 定位的祖先元素进行定位。
相关优势
- 精确控制：绝对定位允许开发者精确控制元素的位置和大小。
- 层叠上下文：绝对定位的元素会脱离文档流，形成新的层叠上下文，便于实现复杂的布局效果。
类型
- 静态定位（static）：默认定位方式，元素按照正常的文档流排列。
- 相对定位（relative）：元素相对于其正常位置进行偏移。
- 绝对定位（absolute）：元素相对于最近的非 static 定位的祖先元素进行定位。
- 固定定位（fixed）：元素相对于浏览器窗口进行定位，不随页面滚动而移动。
应用场景
- 弹窗：如登录框、提示框等。
- 导航栏：如固定在页面顶部的导航栏。
- 图片或文字的悬浮效果：如鼠标悬停时显示的工具提示。
问题原因及解决方法
原因
- 没有设置
position属性：绝对定位需要设置position: absolute;。 - 父元素没有相对定位：绝对定位的元素需要相对于最近的非 static 定位的祖先元素进行定位，如果父元素没有设置
position: relative;或其他非 static 定位，绝对定位将相对于整个文档进行。 - 高度设置为
auto：如果div的高度设置为auto，浏览器会根据内容自动计算高度，这可能导致绝对定位的高度不起作用。
解决方法
- 设置
position: absolute;： - 设置
position: absolute;： - 确保父元素有相对定位：
- 确保父元素有相对定位：
- 设置具体高度：
- 设置具体高度：
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Absolute Positioning</title>
<style>
.parent-div {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
}
.my-div {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent-div">
<div class="my-div"></div>
</div>
</body>
</html>参考链接
通过以上方法，可以确保 div 的绝对定位高度能够正确显示。
相关·内容
2回答
如何做一个div，哪个位置是绝对的，扩展高度100%？div具有动态内容。<nav> <ul> <a href="#">Stuff</a>
浏览 4提问于2014-07-03得票数 1
回答已采纳
2回答
这是为了使#container中的所有div项都适合页面，而不需要滚动。我假设这就是html、body和#container中的height: 100%所做的事情。但是，.thirdwidth元素的高度似乎是整个视口的高度，而不仅仅是扩展到#container div的底部(如果检查该元素，就会发现.thirdwitdh元素位于#container之外)。
浏览 1提问于2016-06-27得票数 0
1回答
如果我有一个很短的内容，我会尝试使用的技巧来使我的页脚锁定在的底部。它正在工作，但只有一小部分页脚是可见的，我仍然必须滚动才能看到所有内容。因为我正在使用Wordpress，如果我登录了，情况会变得更糟，因为wordpress的页眉，页脚更深。我试着删除我该怎么解决这个问题？
浏览 0提问于2013-09-08得票数 0
我有:固定的导航本身，以及一个包含其他四个div的div，我希望完全填充固定导航下的空间。如果不对导航或div进行某种滚动，我似乎无法做到这一点。导航设置为位置:已修复四个内容div本身设置为浮动:左高:50%宽:50%
我甚至不确定这是否可以单独用css来处理，如果可以，那就太棒了
浏览 0提问于2013-03-27得票数 0
回答已采纳
我有一个绝对容器(必须保持绝对高度)，有固定的高度，我需要在里面放2里，一个在顶部，第二个在底部。两个li的高度都是可变的，我不能对底部的li使用绝对位置(这会打碎菜单中的某些东西)。其结构是<div id="top"></div>
<div id="bottom">bottom
浏览 2提问于2015-10-03得票数 5
GoToAction的两个构造函数具有高度属性，其高度是绝对高度(x高于海平面)，还是与其当前位置相比的高度，还是与起飞位置相比的高度？
浏览 0提问于2018-12-26得票数 0
回答已采纳
我正在尝试为一个应用程序做一个流畅的布局，并且在使用css的高度百分比时遇到了一些问题。它使用窗口的水平大小来指定高度%，而我希望它从窗口的垂直大小中获得这个百分比。这是可能的吗?还是我不走运？height: y%;
浏览 0提问于2011-02-27得票数 3
回答已采纳
5回答
我试图在底部的Content div中修复我的fixedDiv，但当我尝试将位置固定为0px，而将底部设置为0px时，fixedDiv将到达整个正文的底部。注意-所有的div高度都是动态的，所以绝对高度将不起作用。任何解决方案都将非常受欢迎。 <!class = "completeBody"> </div</e
浏览 0提问于2017-01-29得票数 3
3回答
我在显示一个div时有问题。由于某些原因，它没有显示内部div。HTML代码: <div class="question_slide inidfeedback">Test</div>
</div>
浏览 5提问于2013-11-04得票数 0
我正在使用phonegap谷歌地图插件，我使用在线phonegap来构建我的apk。另外，我的index.xml应该放在根目录或www目录中。< script type="text/javascript“src="cordova.js">< /script>
此代码访问".cordova.CORDOVA“文件
浏览 1提问于2016-01-18得票数 0
2回答
目前，我正在设置绝对高度值。但有时，由于动态页面，我不得不设置比所需的要高得多的位置。是否有可能得到最低要求的高度？我的意思是高度值，它将显示所有的元素，如高度自动，但不会留下空空间。因此jquery将读取div并计算显示所有元素所需的最小高度值。这有可能吗?
谢谢。
浏览 4提问于2011-09-06得票数 3
回答已采纳
; <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;margin:0;">
<div doj
浏览 1提问于2013-10-23得票数 1
回答已采纳
5回答
可能重复：
如何在不设置绝对高度的情况下，将div ddg-corner-statements中的灰背景样式应用于div内的所有内容？
浏览 5提问于2012-10-12得票数 0
回答已采纳
2回答
我有一个将contenteditable设置为true的div作为文本输入。现在通常，当一些文本到达div的末尾时，它会扩展，但如果我调整div的大小，这种情况就会停止。浏览器不再执行此操作。
浏览 2提问于2010-07-12得票数 4
回答已采纳
2回答
我在父div中有两个子div。第一个子div A有一个绝对高度，第二个div B应该取可用高度的其余部分。该怎么做呢？基本上对于div，我希望高度像(100% - 37px) #C{width:500px;height:37px;}
<div id="C">
浏览 3提问于2011-05-09得票数 0
我试着用一个绝对位置高度为100%的图例制作一个100%的视频，并与媒体对齐，问题是，这一段的高度是100%的，我不想做一半的查询，我想让你自然地穿西装。
浏览 0提问于2015-04-15得票数 1
回答已采纳
2回答
中：border-left:0px;margin-bottom:10px;在状态更新div中，有指向站点上其他位置的链接(人员的个人资料我尝试过使用.status_updates的z-index，甚至将其设置为z-index:-1，但仍然不起作用。我的理解是页脚的z索引被忽略了，因为它有固定的位置。我知道如果我用.status_updates : 40px (固定位置页眉的高度)和bottom:45px (固定位置</e
浏览 0提问于2012-08-03得票数 1
3回答
我有下面的引导程序3.3.7代码： <div class="row"> <div class="item col-lg-8"></div>
浏览 2提问于2020-12-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
