如何使用css增加div的高度？答案

【问题标题】：how to increase the height of div using css?如何使用css增加div的高度？
【发布时间】：2021-09-04 08:08:36
【问题描述】：

我在我的演示应用程序中使用 css 网格。当我有小的 heading 或 small title 时，我的应用程序运行良好(h2).

但是当标题很大时，我的应用程序会出现错误或不符合预期的输出。

这是我的代码

https://codepen.io/naveen-1234/pen/zYzKqQW

<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        .wrapper {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: repeat(10, 40px);
        }

        .one {
            grid-column: 2/5;
            grid-row: 2/5;
            background-color: #ee0
        }

        .two {
            grid-column: 4/8;
            grid-row: 3/8;
            background-color: #eee;
            padding: 20px;
            border: 1px solid #000
        }

        .header_container {
            position: relative;
            border: 1px solid #000;
            min-height: 50px

        }

        .header_container h2 {
            position: absolute;
            bottom: 0;
            padding: 0;
            margin: 0;
        }
    </style>

</head>
<body>
<div class="wrapper">
    <div class="one">one</div>
    <div class="two">Two
        <div class="header_container">
            <h2>Lorem ipsum dolor sit amet</h2>
        </div>
    </div>
</div>


</body>
</html>

第一种情况（工作正常），当瓷砖很小

情况二 Title 很大时，这样显示是错误的。它与Two 文本重叠，而不是增加容器。

预期输出。

当标题文本增加时，黑色边框容器向上增加。内部黑色边框和外部黑色边框向上增长。
不会与文本重叠(TWO)

预期输出截图

【问题讨论】：

标签： javascript html jquery css css-grid

【解决方案1】：

像下面这样更改 .header_container h2 的 css，它应该可以工作。

.header_container h2 {
        margin: 0;
    }

【讨论】：

它在向下方向增加 div 高度......我希望它应该在向上方向增加
你能发布预期的结果截图吗？
附上预期的屏幕截图..我无法使用此解决方案

【解决方案2】：

这是因为您使用绝对位置作为 h2 标题。]

.header_container h2 {
/*   position: absolute;
  bottom: 0;
  padding: 0;
  */
  margin: 0; 
}

绝对位置使元素像幽灵一样，并且无法在 HTML 流中占用任何空间。如果您想使用绝对位置，请在 <div class="two">Two</div> 上的父级上使用它

如果您觉得答案有帮助，请采纳。它让其他人知道这是正确的答案。

【讨论】：

请删除你没有帮助的答案..之后它会向下增长
你能解释一下你的问题，并且期望输出更好一点，因为如果你想让它向上走，那么它肯定会与文本二重叠。你可以使用输出的图像。
将附加图像视为预期输出