Re: 100% height and DIV overflow from Bruno Melloni on 2005-09-06 (www-style@w3.org from September 2005)

From: Bruno Melloni <Bruno.Melloni@akuratus.com>
Date: Tue, 06 Sep 2005 10:59:35 -0500
To: <lholst@students.cs.uu.nl>,<www-style@w3.org>
Message-Id: <s31d76ae.024@mail.akuratus.com>
Thanks to all that tried to help, even though it seems that my question is off-topic for this mailing list.  My apologies if this was not the right location for it.

Unfortunately I am either trying to do something not supported by CSS, or I am too dense to understand how to make the suggested solutions work within the context of my page.  I could not get any of the suggestions to work correctly in my page.

Can someone please point me to an appropriate mailing list for this thread?

Thanks.


*** FOR MOST PEOPLE, EMAIL ENDS HERE ***

*----------------------------------------------------------------------
For Laurens (and curious people) only:

I agree with your "small rant" - in principle.  I am no fan of IE and I normally use Firefox during development.  

But we were forced to use IE for our corporate product because after designing the page based on how we (average joe developers) interpreted CSS, the code written  failed to work on Firefox.  But during debugging we tested on IE and it worked OK.  Several developers in my firm have been trying to make this code work in Firefox on and off for a year - with no success.  

That is why we **have to** recommend to our customers to use IE.  We must have this functionality... regardless of what the standard might say.  Whatever IE's flaws might be, for this particular need it works well and cleanly.

My hope is that some day I will find the correct "standard way" of achieving what we need.  That is why I posted this question in the first place.

*----------------------------------------------------------------------
For anyone getting into this thread late, here is code that makes the "problem" obvious.

<html>
<HEAD>
<STYLE type="text/css">
BODY {
    margin: 0;
    padding: 0;
    color: #575529;
    background-color: #CDCD9C;
    font-family: Century Gothic, Copperplate Gothic Light, Arial, Helvetica, sans-serif;
    font-size: 9pt;
    text-decoration: none;
}
A {
    /*color: #575529;*/
    color: #8C4600;
    text-decoration: none;
}
A:hover {
    color:  #562429;
    text-decoration: none;
}
DIV {
    width: 100%;
    height: 100%;
    overflow: auto;
    /*
    position: absolute;
    max-width: 100%
    min-height:100%;
    max-height: 100%
    top: 0;
    bottom: 0;
    */
}
UL.none {
    list-style-type: none;
}
.maxw {
    width: 100%;
    max-width: 100%
}
.maxh {
    height: 100%;
    max-height: 100%;
}
.maxwh {
    width: 100%;
    height: 100%;
    max-width: 100%
    max-height: 100%
}
.maxwh_noborder{
    border: 0;
    width: 100%;
    height: 100%;
    max-width: 100%
    max-height: 100%
}
.maxw_noborder{
    border: 0;
    width: 100%;
    max-width: 100%
}
.maxh_noborder{
    border: 0;
    height: 100%;
    max-width: 100%
    max-height: 100%
}
.banner_bg {
  background-color: #575529;
}
.menu_top {
    height: 17;
    margin-left: 15;
    color: #575529;
    background-color: #B6AA5A;
    font-family: Century Gothic, Copperplate Gothic Light, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    text-decoration: none;
}
.menu_left {
    color: #575529;
    background-color: #CDD0B9;
  font-family: Century Gothic, Copperplate Gothic Light, Arial, Helvetica, sans-serif;
  font-size: 9pt;
    text-decoration: none;
}
.pg_title {
    font-size: 12pt;
    font-weight: bold;
}
.footer_separator {
    width: 100%;
    height: 17px;
    background-color: #B6AA5A;
}
.footer_text {
    color: #575529;
  font-family: Century Gothic, Copperplate Gothic Light, Arial, Helvetica, sans-serif;
  font-size: 7.5pt;
    text-decoration: none;
    margin-top: 2;
    margin-bottom: 0;
    text-align: center;
}
</STYLE>
</HEAD>

<BODY topmargin="0" leftmargin="0" class="maxwh">
<TABLE cellpadding="0" cellspacing="0" class="maxwh_noborder">
  <TBODY>
    <TR>
      <TD class="banner_bg" class="maxw">
        <TABLE cellpadding="0" cellspacing="0" class="maxw_noborder">
          <TR BGCOLOR="#464420"><TD class=maxw>&nbsp;</TD></TR>
        </TABLE>
      </TD>
    </TR>
    <TR>
      <TD class="menu_top" width="100%">
        <TABLE cellpadding="0" cellspacing="0" class="maxw_noborder">
          <TR class="menu_top">
            <TD width="170" nowrap>
              <A href="http://localhost:8080/tc/TcInit.do" class="menu_top">
                <B>Teacher Info Center</B>
              </A>
            </TD>
            <TD class="maxw">
              <TABLE cellpadding="0" cellspacing="0" class="maxw_noborder">
                <TR class="menu_top">
                  <TD nowrap class="menu_top">Teacher Best</TD>
                  <TD  class="maxw">&nbsp;</TD>
                  <TD nowrap align="right" style="font-weight: bold;">
                    <A href="http://localhost:8080/tc/" class="menu_top">Portal</A>
                    &nbsp;&nbsp;
                    <A href="http://localhost:8080/tc/TcLogoffInit.do" class="menu_top">Logoff</A>&nbsp;&nbsp;&nbsp;&nbsp;
                  </TD>
                </TR>
              </TABLE>
            </TD>
          </TR>
        </TABLE>
      </TD>
    </TR>
    <!-- *************** BOTTOM 2 PANELS START HERE ************** -->
    <TR>
      <TD class="maxwh">
        <TABLE cellpadding="0" cellspacing="0" class="maxwh_noborder">
          <TR>
            <!-- Left panel starts here (irrelevant) -->
            <TD width="170" class="maxh">
              <TABLE cellpadding="0" cellspacing="0" class="maxh_noborder" width="170">
                <TR><TD height="10" class="menu_left">&nbsp;</TD></TR>
                <TR>
                  <TD valign="top" class="menu_left" style="height: 100%; max-height: 100%;" width="170">
                    Menu here
                  </TD>
                </TR>
              </TABLE>
            </TD>
            <!-- *********** BOTTOM-RIGHT PANEL STARTS HERE ************* -->
            <TD valign="top" class="maxwh">
              <TABLE cellpadding="0" cellspacing="0" class="maxwh_noborder" >
                <TR>
                  <TD width="15">&nbsp;</TD>  <!-- left spacing -->
                  <TD class="maxwh">          <!-- MAIN BODY -->
                    <TABLE cellpadding="0" cellspacing="0" class="maxwh_noborder">
                      <TR><TD>&nbsp;</TD></TR>
                      <TR>
                        <TD>
                          <TABLE cellpadding="0" cellspacing="0" class="maxw_noborder">
                            <TR><TD class="pg_title">Title Here</TD></TR>
                          </TABLE>
                        </TD>
                      </TR>
                      <TR>
                        <TD height="10"></TD>
                      </TR>
                    <form name="teacherViewForm" method="POST" action="/tc/TeacherViewPost.do">
                      <TR>
                        <TD class="maxwh">
                          <DIV>
                            <TABLE cellpadding="0" cellspacing="4" class="pgmaxwh">
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                              <TR><TD>x</TD></TR>
                            </TABLE>
                          </DIV>
                        </TD>
                      </TR>
                    </FORM>
                  </TABLE>
                </TD>
                <TD width="15">&nbsp;</TD>
              </TR>
            </TABLE>
          </TD>
        </TR>
      </TABLE>
      </TD>
    </TR>
    <TR>
      <TD valign="top" class="footer_separator">&nbsp;</TD>
    </TR>
    <TR>
      <TD class="footer_text">&#xA9; 2003-2005
        <A href="http://www.akuratus.com" class="footer_text">Akuratus</A>
        |
        <A href="#" class="footer_text">Privacy</A>
      </TD>
    </TR>
  </TBODY>
</TABLE>
</BODY>
</html>


Bruno Melloni
Director of Software Architecture
Akuratus Corporation
1333 N. Stemmons Fwy, Suite 110
Dallas, Texas 75207
Phone: 469.227.0920
Fax: 469.227.0967
bruno.melloni@akuratus.com
www.akuratus.com
Received on Tuesday, 6 September 2005 16:00:06 UTC