Positioning with 100% HEIGHT and RELATIVE DIV_问答_开发者

Positioning with 100% HEIGHT and RELATIVE DIV

开发者 https://www.devze.com 2023-04-10 13:10 出处：网络

相关专题：css html-table

I have a big problem with absolute positioned elements inside my main TD. Well, the problem is that they require a relative positioned parent to be correctly placed using top, right, bottom and left properties... but I can not set "position: relative;" on the TD itself because Mozilla is not accepting this.

So this is the solution I came up with (of course, body and html have both height 100% and width 100% set in CSS):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
  <head></head>
  <body>
      <div style="height: 100%; margin: 0 auto; position: relative; width: 840px;">
          <table cellpadding="0" cellspacing="0" style="height: 100%; width: 100%;">
              <tr>
                  <td>
                      <div id="content_inner">[NORMAL CONTENT]</div>
                      <table cellpadding="0" cellspacing="0" id="bottom: 40px; position: absolute; right: 10px; width: 90px;">
                          <tr>
                              <td>[ABSOLUTELY POSITIONED CONTENT]</td>
                          </tr>
                      </table>
                  </td>
              </tr>
          </table>
      </div>
  </body>
</html>

Everything looks just perfect until I start resizing the browser or modifying the window开发者_运维问答 size by opening the development tools, for example. That's when the website layout gets messed up: while the table is still filling up the whole space vertically, the DIV seems not to do the same thing. The DIV just looks smaller than the table, it doesn't wrap the table anymore... so the absolute positioned elements following its size take a wrong offset.

I've also tried the following solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head></head>
    <body>
        <table cellpadding="0" cellspacing="0" style="height: 100%; margin: 0 auto; width: 840px;">
            <tr>
                <td>
                    <div style="height: 100%; position: relative; width: 100%;">
                        <div id="content_inner">[NORMAL CONTENT]</div>
                        <table cellpadding="0" cellspacing="0" id="bottom: 0; position: absolute; right: 10px; width: 90px;">
                            <tr>
                                <td>[ABSOLUTELY POSITIONED CONTENT]</td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

But, as a result, I'm getting the [NORMAL CONTENT] being no more vertically centered (it stays on the top of the relative positioned DIV). Can someone help me please?

This won't work, instead of id="" you should use style=""