Height auto - calculated height is incorrect so ba

问题:

I am trying to make height auto. Whatever i tried did not work until now.

I am using masterpage, asp.net 4.0 ,css

Here the config

Here the css classes

*
{
    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;
}

According to the firebug the computed style height of main is 0px this is the problem

回答1:

To avoid having to manually set a different fixed height on each page (which is a terrible solution), you have two options:

• Use JavaScript to calculate the height.
• Don't use absolute positioning.

There is no reason to use absolute positioning for your layout. You should remove position: absolute from almost everything, and write new CSS.

You're going to need a lot of float: left and float: right.

回答2:

If you're using Bootstrap 4 (Flex)

If your <img> is direct children of a div with display:flex, you might want to set display:block on parent div instead, so height:auto will work.