在不知道其高度的情况下将一个div框定位在另一个绝对定位的div框下
，可以使用以下方法：
- 使用CSS的position属性和top、left属性来实现定位。首先，将父级div设置为相对定位（position: relative），然后将子级div设置为绝对定位（position: absolute）。接着，通过top和left属性来调整子级div的位置，将其定位在父级div的下方。
<style>
.parent {
position: relative;
}
.child {
position: absolute;
top: 100%;
left: 0;
}
</style>
<div class="parent">
<div class="child">
<!-- 子级内容 -->
</div>
</div>- 使用CSS的flexbox布局来实现定位。将父级div设置为flex容器（display: flex），并设置flex-direction为column，这样子级div就会垂直排列。然后，通过设置flex属性来调整子级div的位置，将其放置在父级div的下方。
<style>
.parent {
display: flex;
flex-direction: column;
}
.child {
flex: 1;
}
</style>
<div class="parent">
<div class="child">
<!-- 子级内容 -->
</div>
</div>这两种方法都可以在不知道div高度的情况下将一个div框定位在另一个绝对定位的div框下。具体选择哪种方法取决于实际需求和布局结构。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云物联网平台（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发平台（MPS）：https://cloud.tencent.com/product/mps
- 腾讯云音视频处理（MPS）：https://cloud.tencent.com/product/mps
相关·内容
1回答
绝对定位父级，其子级不继承宽度。
html、css、flexbox、absolute
我有一个flex框，它将根据其内部的内容按列增长；该框的宽度应该适合内容。我必须把这个盒子放在一个父容器中，这个容器是绝对定位在页面上的。
如果这样做的话，父容器并不是获取子容器的动态宽度，而是坚持它的初始宽度，并且子容器的内容已经溢出。
可用代码：
.parent {
color: white;
background: blue;
margin: auto;
padding: 1em;
position: absolute;
left: 10px;
top: 100px;
}
.child {
background-color: green;
displa
浏览 5提问于2022-02-02得票数 0
回答已采纳
2回答
如何适应儿童100%的高度/宽度的家长伸缩箱？
html、css、flexbox、css-position
..and如何将父/弹性框放在标题下面？如果标题改变了高度，向下按下下面的父项？
我使用位置固定，因为我不能得到flexbox显示，除非我设置位置固定或绝对，但我正在使网站响应，所以我不能放置绝对位置。
HTML
<div id="header"></div>
<div class="parent">
<div id="child1-aside"></div>
<div id=&
浏览 0提问于2017-07-01得票数 0
1回答
在flex父级的子级中使用位置绝对
html、css、flexbox、position
我正在使用flex的属性和位置，我发现了一些东西。 * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
}
.mainContainer {
margin: 10vh auto;
width: 80vh;
height: 80vh;
/* display: flex; */
justify-content: center;
/* align-items: center; */
border: 1px solid red;
/* positi
浏览 160提问于2021-10-20得票数 1
2回答
如何在绝对父div中将绝对div拉伸到它的祖父母的宽度
javascript、html、css、css-position
我的html/css结构如下：
<div class="grandparent">
<div class="row">...</div>
<div class="absolute-parent">
<div class="absolute-child">...</div>
</div>
</div>
.grandparent {
position: relative;
}
.absolute-parent {
浏览 0提问于2020-09-10得票数 0
1回答
我们有两个这样的标签
<div id="parent">
<div id="child">
</div>
</div>
我们有一些像这样的CSS代码
#parent{
position:absolute;
}
#child{
position:absolute;
top:10px;
left:30px;
}
我的问题是#child标签，我想从body标签设置#child top:和left:，但left:和top:将从#child父标签设置
注意:我不能编辑#pare
浏览 1提问于2018-06-01得票数 0
2回答
绝对定位元素的相对子元素的位置
css、css-position
在具有position: absolute的父代中，具有position: relative的子代应该如何表现？
例如()：
<div style="position:relative; float:left; min-width:900px; max-width: 1400px; height:100%;">
<div style="position:absolute; top:0; right:0; width:200px; height:300px;">
<div style="position:relat
浏览 0提问于2012-04-10得票数 0
1回答
绝对定位图像溢出
html、css
我有一个标题部分，应该根据标题图像进行包装。每一页都有不同的图像，所以它必须是响应的。然而，标题部分不会与图像包装，因为它是绝对定位的。
正如您在片段中所看到的，图像上有height: auto，只是溢出到父文件之外。是否有根据图像制作父包的方法？
*, ::before, ::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#header::before, #hero.background-wrapper::before {
opacity: 0.2;
}
.background
浏览 4提问于2022-08-03得票数 0
1回答
计算绝对位置嵌套子对象的高度
javascript、html、css、flexbox、css-hack
我一直坚持这个问题
.autoHeightParent {
width: 500px; /* just for example */
position: relative;
}
.absolutePosChild {
/* absolute is required to make pretty drag and drop transitions with interpolating left property */
position: absolute;
display:flex;
flex-direction: column;
border: 1px so
浏览 11提问于2016-07-28得票数 0
回答已采纳
1回答
在使用flex方向列时如何水平对齐div
html、css、flexbox
我有一个容器，它有一个表和一个div，其中display设置为flex，flex-direction设置为column。
我想使div中心水平对齐。这是代码
<style>
.container {
display: flex;
flex-direction: column;
border: 1px solid red;
}
.mytable {
width: 100%
}
table,
th,
td {
border: 1px solid b
浏览 0提问于2018-04-11得票数 5
2回答
每个顶部的三个Divs左列中的其他-没有引导带- HTML / CSS
html、css、position、css-position、multiple-columns
我很难将三个div堆在每个div的顶部，另一个放在左列div中。以下是我想要达到的目标：
我试图使用在中找到的解决方案，因此我有以下内容：
.main-div {
border: 1px solid black;
}
.main-div-line-1 {
border-bottom: 1px solid rgba(0,0,0,.125);
padding: 5px;
font-family: "Proxima Nova Bold";
font-size: 20px;
text-align: center;
}
.ma
浏览 0提问于2020-05-19得票数 0
回答已采纳
3回答
如何在flex布局中使用位置固定？
html、css、flexbox
我有一个有两列的flexbox布局。
左边的栏是固定的，而右边的栏是可滚动的。
你怎么能这样做呢？
看一下下面的代码：
#parent {
display: flex;
}
#left {
flex-grow: 1;
}
#left div {
position: fixed;
background: blue;
top: 0;
left: 0;
height: 100vh;
}
#right {
flex-grow: 5;
background: red;
height: 300vh;
}
<div id="parent"&g
浏览 2提问于2016-12-31得票数 13
回答已采纳
2回答
如何制作像youtube这样的自定义弹出式容器
css、popupwindow
我想让弹出窗口像youtube分享，因为它粘在按钮旁边。我尝试了bootstrap模式，但它在屏幕中央弹出。当点击youtube分享按钮时，弹出的是“环绕”按钮。
有人知道怎么修吗？
HTML
<div class="box">
<a class="button" href="#popup1">share</a>
</div>
<div id="popup1" class="overlay">
<div class="po
浏览 0提问于2018-03-26得票数 0
3回答
为什么position方法没有返回预期值？
javascript、jquery
在这种情况下，为什么position方法不返回[left: 100, top: 10]：
<!DOCTYPE HTML>
<html>
<head>
<style>
#parent1 {
width: 300px;
height: 200px;
border: solid 9px pink;
}
#child1 {
position: relative;
left: 100px;
top: 10px;
width: 100px;
height: 100px;
border:
浏览 0提问于2011-08-10得票数 0
1回答
父网格的子类div没有填充所有可用的空间。
html、css、flexbox、css-grid
我有这样的设置，在这个设置中，我需要表单、按钮和选择框来水平地占据所有可用空间。在小屏幕上，所有的工作都是按预期进行的。
然而，当我在更大的屏幕中测试它时，所有的空间都没有被子元素填充。
我尝试了网格和flex->row两种方法，结果是相同的。如何修正我的代码，即使在更大的大小子元素填充所有可用的空间水平与它们之间的相等空间？
.grand-parent {
margin-top: 2%;
left: 0%;
position: relative;
display: flex;
flex-direction: row;
}
.parent {
m
浏览 3提问于2022-07-22得票数 1
回答已采纳
3回答
亲子身高问题
css
我有一个父div，它有position: relative，他的子div有position: absolute。这样的职位是必须的。问题是父对象不能拉伸到子对象的高度。问题是如何让它伸展到孩子的高度？
标记类似于以下内容：
<!DOCTYPE HTML>
<html>
<head>
<style>
.parent {
position: relative;
border: solid 1px red;
}
浏览 1提问于2011-01-15得票数 0
2回答
柔韧性儿童-高度和宽度: 100%
html、css、flexbox
下面的代码显示了一个由一些<parent>项组成的<child>容器。
<child>项位于带有.flex属性的<parent>项中(请参见父元素中的display: flex )，因此它们准确地填写了父元素。到目前为止，这一切都很好。
但是，我现在想要实现的是，display: flex属性只应用于<child>项的高度，因此它们完全适合于父元素。
对于宽度，我希望每个<child>项都位于周围父级的100%上，因此它们最终被显示为一个块(彼此之间，而不是彼此之间)。
为了实现这一点，我需要在代码中修改什么？
您还可以找
浏览 4提问于2017-08-25得票数 0
回答已采纳
15回答
使绝对定位div扩展父div高度
html、css、position、master-pages、parent-child
正如你在下面的CSS中看到的，我希望child2定位在child1之前。这是因为我目前正在开发的网站也应该在移动设备上工作，在移动设备上，child2应该在底部，因为它包含了我想要的在移动设备内容下面的导航。-为什么不是2个母版页？这是在整个divs中仅有的2个重新定位的页面，所以2个母版页对于这个微小的更改来说是多余的。
HTML：
<div id="parent">
<div class="child1"></div>
<div class="child2"></div&g
浏览 2提问于2012-08-22得票数 243
回答已采纳
1回答
如何将图像设置在相同的底层(仅使用css而不是js)？
css、html、flexbox
谢谢你提前的回复。
我知道te如何创建响应性产品网格，如果我所有的图片都有相同的高度和相同的标题长度，只使用css属性，比如flex display和flex-end align，但是当我对每个图像使用图像(多个高度)和标题(每个图像的长度不同)时，我得到了以下问题：
HTML代码
<div class="imgContainer">
<div class="imgChild row-eq-height">
<div class="img-slider-parent">
浏览 0提问于2016-10-29得票数 3
3回答
父母的身高和祖父母的地位
css
我有一个具有绝对位置的子元素，我的任务是使这个子元素适合父元素的高度，并将其相对于父边框移动。
下面是一个例子，没有给出父和祖父母边界之间的距离(填充值只是一个例子)。
.grand-parent {
position: relative;
border: solid 2px blue;
display: flex;
flex-flow: column;
width: 100px; // this value is just an example
height: auto;
padding: 40px; // this value
浏览 3提问于2022-04-20得票数 0
1回答
在嵌套flex容器时适当使用flex属性
html、css、flexbox
我在正确使用flexbox时遇到了问题，我想弄清楚嵌套的父元素和子元素是如何工作的。
我知道孩子继承了父母的弹性财产，但这是否会被后代(例如“孙子”)恢复呢？柔箱的正确用法是什么？
换句话说，我是否也必须为孩子的孩子应用display: flex？这会覆盖第一个孩子的父母的弹性属性吗？
.parent-container {
display: flex;
flex: 1 0 100%;
background-color:yellow;
}
.child-container {
flex: 1 1 50%
background-color: blue;
}
.baby-o
浏览 7提问于2016-06-15得票数 29
回答已采纳
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
腾讯云开发者
