Позиционирование со 100% высотой и относительным DIV - PullRequest
0 голосов
/ 05 октября 2011

У меня большая проблема с абсолютно позиционированными элементами внутри моего основного ТД.Ну, проблема в том, что они требуют, чтобы относительный родительский элемент был правильно размещен с использованием свойств top, right, bottom и left ... но я не могу установить "position :lative;" на самом TD, потому чтоMozilla не принимает это.

Так что это решение, которое я придумал (конечно, body и html имеют высоту 100% и ширину 100%, заданные в 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>

Все выглядит просто идеально, пока я не начну изменять размер браузера или изменять размер окна, например, открывая инструменты разработки.Вот когда макет веб-сайта испортился: хотя таблица все еще заполняет все пространство по вертикали, DIV, похоже, не делает то же самое.DIV просто выглядит меньше таблицы, он больше не переносит таблицу ... поэтому элементы с абсолютным позиционированием, следующие за его размером, принимают неправильное смещение.

Я также попробовал следующее решение:

<!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>

Но, в результате, я получаю [НОРМАЛЬНОЕ СОДЕРЖАНИЕ] больше не вертикально по центру (оно остается на вершине DIV с относительным положением).Может кто-нибудь помочь мне, пожалуйста?

1 Ответ

0 голосов
/ 15 октября 2011

Это не сработает, вместо id = "" вы должны использовать style = ""

id = "bottom: 0; позиция: абсолютная; справа: 10px; ширина: 90px;"

Но даже использование style =" "- это то, что я не рекомендую.Просто создайте класс или идентификатор и затем добавьте CSS в свой файл style.css.

Могу ли я спросить, чего именно вы пытаетесь достичь?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...