自动高度 - 计算的高度不正确，因此背景无法正常工作 - ASP.net 4.0 - 使用母版页

Question

我正在尝试使高度自动。无论我尝试什么，直到现在都不起作用。

我正在使用 masterpage，asp.net 4.0 ，css

这里是配置

这里是 css 类

*
{
    margin: 0;
    padding: 0;
}

.logo
{
    height: 100px;
    width: 1000px;
    position: absolute;
    top: 0px;
}

body, html
{
    height: auto;
    height: 100%;
}

.footer
{
    visibility: hidden;
}

.MenuBarMasterPage
{
    position: absolute;
    top: 202px;
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    height: 40px;
}

body
{
    background: #0C0C0C url(http://static.monstermmorpg.com/images/backgrounds/animus-mix.gif) repeat;
    margin-right: auto;
    margin-left: auto;
    width: 1000px;
    background-position: top center;
}

.main
{
    position: absolute;
    top: 242px;
    width: 1000px;
    background: #D1D1D1 url(http://static.monstermmorpg.com/images/backgrounds/content.png) repeat;
    z-index: 2;
    height: auto;
}

根据对于萤火虫来说，计算出来的 main 的样式高度是 0px 这就是问题

Answer 1

为了避免必须在每个页面上手动设置不同的固定高度（这是一个糟糕的解决方案），您有两个选择：

• 使用 JavaScript 计算高度。
• 不要使用绝对定位。

没有理由在布局中使用绝对定位。您应该从几乎所有内容中删除 position:absolute，并编写新的 CSS。

您将需要大量 float: left 和 float: right。

Answer 2

如果您使用的是 Bootstrap 4 (Flex)

如果您的 是带有 display:flex 的 div 的直接子级，您可能需要设置 display :block 在父 div 上，所以 height:auto 可以工作。