html - 在 HTML 中控制容器中的高度

Question

这里有一些东西可以控制带有绿色边框的 div div 标签的高度:

有人可以通过开发者工具在 CSS 中看到什么吗？我想不通。

我需要制作一个看起来像这样的网格，但是绿色边框的 div 标签的高度一直在阻止我。重要的是文本仍应居中。

这实际上是代码应该的样子，但是高度阻止了:

这是网上的代码:

div class="background-image" @Html.Raw(topImageStyling)></div>
       <div class="top-area" style="border: 4px solid red;">
            <div class="container col-md-8" style="border: 4px solid green;">


            @if (!string.IsNullOrEmpty(headerText))
            {
                if (pageAlias == "Blog")
                {
                    <h1 class="header-xl center">
                        @Html.Raw(headerText)
                    </h1>
                }
                else
                {
                    <p class="header-xl center">
                        @Html.Raw(headerText)
                    </p>
                }
            }
            @if (CurrentPage.HasValue("imageTeaserText"))
            {
                <p class="sub-header center">
                    @Html.Raw(CurrentPage.imageTeaserText)
                </p>
            }


        </div>
    </div>

Answer 1

根据我们在评论中的讨论，这就是 html 的结构。然后只需从 .background-image 中删除 position:absolute; 并从 .container 中删除 min-height:500px; >

<div class="background-image" @Html.Raw(topImageStyling)>
    <div class="top-area" style="border: 4px solid red;">
        <div class="container col-md-8" style="border: 4px solid green;">

            @if (!string.IsNullOrEmpty(headerText))
            {
                if (pageAlias == "Blog")
                {
                    <h1 class="header-xl center">
                        @Html.Raw(headerText)
                    </h1>
                }
                else
                {
                    <p class="header-xl center">
                        @Html.Raw(headerText)
                    </p>
                }
            }
            @if (CurrentPage.HasValue("imageTeaserText"))
            {
                <p class="sub-header center">
                    @Html.Raw(CurrentPage.imageTeaserText)
                </p>
            }


        </div>
    </div>
</div>