css - 高度自动计算的高度不正确，因此背景无法正常工作 - 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;
}

根据 Firebug ，main 的计算样式高度是 0px 这就是问题所在

Answer 1

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

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

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

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