Высота автоматически подсчитанная высота неверна, поэтому фон не работает - ASP.net 4.0 - Используемая мастер-страница

Я пытаюсь сделать высоту auto. Что бы я ни пытался, до сих пор не работал.

Я использую masterpage, asp.net 4.0, css

Здесь config

enter image description here

Здесь классы 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, это проблема

Ответ 1

Чтобы избежать необходимости устанавливать другую фиксированную высоту на каждой странице (что является ужасным решением), у вас есть два варианта:

  • Используйте JavaScript для расчета высоты.
  • Не используйте абсолютное позиционирование.

Нет причин использовать абсолютное позиционирование для вашего макета. Вы должны удалить position: absolute из почти всего и написать новый CSS.

Вам понадобится много float: left и float: right.