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的结构。然后，只需从position:absolute;移除.background-image，然后从min-height:500px;移除.container

<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>

在HTML中控制容器中的高度

1 个答案: