0

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

enter image description here

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

casperOne
  • 73,706
  • 19
  • 184
  • 253
Furkan Gözükara
  • 22,964
  • 77
  • 205
  • 342
  • I see a placeholder, but what content gets put into `
    `?     – jball Sep 06 '11 at 21:18
  • for example check this page. after menus the place holder starts. http://www.monstermmorpg.com/ . at this page it is positioned with absolute values but that requires to set fixed height to all pages and i am trying fix that issue. – Furkan Gözükara Sep 06 '11 at 21:21
  • Sorry, I'm behind a pretty restrictive firewall so I can't click through. – jball Sep 06 '11 at 21:26

2 Answers2

0

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.

Community
  • 1
  • 1
Lucas Bustamante
  • 15,821
  • 7
  • 92
  • 86
0

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.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • 1
    Once you use `position: absolute`, the element is removed from normal flow, and "the height is not calculated" - that's what absolute positioning does. Look at this: http://jsfiddle.net/aphDY/. – thirtydot Sep 06 '11 at 21:43
  • i removed position absolutes and the height is still incorrectly calculated. i made them as position:relative; – Furkan Gözükara Sep 06 '11 at 21:45
  • Remove the `position` property completely on everything. Other than JavaScript, **there is no quick fix**. Use JavaScript or start again with the layout CSS. – thirtydot Sep 06 '11 at 21:50
  • i can use jquery. but i think there is no way to calculate required min height of div right ? – Furkan Gözükara Sep 06 '11 at 21:58
  • It should be very easy with JavaScript+jQuery, I'll take a look. – thirtydot Sep 06 '11 at 22:00
  • if i can get the minimum required height of the div (i currently set absolute height) with jquery i can easily correct heights and position elements – Furkan Gözükara Sep 06 '11 at 22:17
  • I was wrong - it's not easy even with jQuery. I just wasted ten minutes of my life playing around with it. I *heavily recommend* redoing the CSS. If you want to try JavaScript yourself, in my testing I was basing calculations off `$('#EnglishMainPage').height()` (I removed the `height: 2000px` on it). It came close. – thirtydot Sep 06 '11 at 22:37