如何根据它的位置设置位置：相对父母的高度：绝对孩子？
dvReporte 中的 html 代码和“style####”类来自自定义报告 API，它总是因报告而异，因此我无法将其自定义为使用“浮动”而不是“位置” ：绝对”。
报表曾经上下溢出，但是通过使dvReporte“位置：相对；”我将内容保留在父 div 中。
问题是dvReporte的高度是0，根据我之前的研究，你在使用“position: absolute”的时候是不能用css设置正确的。有没有办法根据所有子级的高度获取父级 div 的总高度？
HTML 示例：
<div id="dvReporte" style="position: relative;">
<div class="style0000" style="position: absolute; left: 268px; top: 24px; width: 281px; height: 19px; z-index: 0;">Artículos Deportivos 2000, S.A. de C.V.</div>
<div style="position: absolute; left: 24px; top: 72px; width: 768px; height: 15px; z-index: 1;">
<img src="Buffer_htm_images/T35020_Z100_0001.gif?rand=562" width="768" height="15" border="0" alt="">
</div>
<div class="style0001" style="position: absolute; left: 366px; top: 82px; width: 292px; height: 13px; z-index: 2; overflow: hidden;">
<div style="position: absolute; left: 102px; top: 0px; width: 190px;">Al 31/Dic./2020</div>
</div>
<div class="style0002" style="position: absolute; left: 324px; top: 47px; width: 169px; height: 26px; z-index: 3;">Balance General</div>
<div class="style0003" style="position: absolute; left: 106px; top: 100px; width: 600px; height: 13px; z-index: 4; overflow: hidden;"> A C T I V O</div>
<div class="style0004" style="position: absolute; left: 106px; top: 130px; width: 260px; height: 13px; z-index: 5; overflow: hidden;"> </div>
<div class="style0001" style="position: absolute; left: 106px; top: 145px; width: 600px; height: 13px; z-index: 6; overflow: hidden;">Circulante</div>
<div class="style0004" style="position: absolute; left: 106px; top: 160px; width: 260px; height: 13px; z-index: 7; overflow: hidden;">CAJA</div>
<div class="style0004" style="position: absolute; left: 366px; top: 160px; width: 98px; height: 13px; z-index: 8; overflow: hidden;">
<div style="position: absolute; left: 54px; top: 0px; width: 44px;">1,001.00</div>
</div>
<div class="style0004" style="position: absolute; left: 106px; top: 175px; width: 260px; height: 13px; z-index: 9; overflow: hidden;">BANCOS1</div>
<div class="style0004" style="position: absolute; left: 366px; top: 175px; width: 98px; height: 13px; z-index: 10; overflow: hidden;">
<div style="position: absolute; left: 42px; top: 0px; width: 56px;">154,190.03</div>
</div>
<div class="style0004" style="position: absolute; left: 106px; top: 190px; width: 260px; height: 13px; z-index: 11; overflow: hidden;">Bancos2</div>
<div class="style0004" style="position: absolute; left: 366px; top: 190px; width: 98px; height: 13px; z-index: 12; overflow: hidden;">
<div style="position: absolute; left: 48px; top: 0px; width: 50px;">22,829.97</div>
</div>
<div class="style0001" style="position: absolute; left: 106px; top: 205px; width: 260px; height: 13px; z-index: 13; overflow: hidden;">Totales de Bancos</div>
<div class="style0001" style="position: absolute; left: 366px; top: 205px; width: 98px; height: 13px; z-index: 14; overflow: hidden;">
<div style="position: absolute; left: 36px; top: 0px; width: 62px;">178,021.00</div>
</div>
</div>
CSS 示例：
.style0000 {font-family: Tahoma, Geneva, sans-serif; font-size: 12pt; white-space: nowrap;}
.style0001 {font-family: Tahoma, Geneva, sans-serif; font-size: 8pt; font-weight: bold; white-space: nowrap;}
.style0002 {font-family: Tahoma, Geneva, sans-serif; font-size: 16pt; font-weight: bold; white-space: nowrap;}
.style0003 {font-family: Tahoma, Geneva, sans-serif; font-size: 8pt; font-weight: bold; text-decoration: underline; white-space: nowrap;}
.style0004 {font-family: Tahoma, Geneva, sans-serif; font-size: 8pt; white-space: nowrap;}
.style0005 {font-family: Tahoma, Geneva, sans-serif; font-size: 7pt; white-space: nowrap;}
感谢您的时间。
报告示例，手动设置高度：
1 个答案:
答案 0 :(得分：3)
以这种方式使用 CSS 和绝对定位时，无法完成您的要求。
您可以尝试使用 javascript 设置包含元素的高度：
// Gets containing div
const parent = document.querySelector('#dvReporte')
// Gets all children of containing div
const children = parent.children
// Stores the largest extent found (offsetTop + offsetHeight)
let largestExtent = 0
// iterate the children elements and store the largest extent found
for (var i = 0; i < children.length; i++) {
let extent = children[i].offsetHeight + children[i].offsetTop
if (extent > largestExtent) largestExtent = extent
}
// Set the height of the containing element, adds an extra 20px for padding at the bottom
parent.style.height = `${largestExtent + 20}px`
https://codepen.io/mward-sudo/pen/abWExya?editors=1111
我知道输出工具是您的问题，但作为参考，本报告中的代码应该正确使用表格来完成大部分布局，如下所示。
.wrapper {
font-family: Tahoma, Geneva, sans-serif;
border: 1px solid black;
padding: 1em;
width: 60em;
margin: 1em auto
}
header {
text-align: right;
}
table {
margin: 0 auto;
}
.total {
text-decoration: underline;
}<div class="wrapper">
<header>
<p>Artículos Deportivos 2000, S.A. de C.V.</p>
<h1>Balance General</h1>
<p class="date">Al 31/Dic./2020</p>
</header>
<table>
<thead>
<tr>
<th style="width: 20em; border-bottom: 1px solid black;">A C T I V O</th>
<th style="width: 7em;"></th>
<th style="width: 7em;"></th>
<th style="width: 7em;"></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Circulante</strong></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CAJA</td>
<td>1,001.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>BANCOS1</td>
<td>154,190.03</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Bancos2</td>
<td>22,829.97</td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Totales de Bancos</strong></td>
<td><strong>178,021.00</strong></td>
<td></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>etc.</strong></td>
<td></td>
<td><strong>-0.00</strong></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>etc.</td>
<td>0.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="total"><strong>1,000,000</strong></td>
</tr>
</tbody>
</table>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？