Почему элемент, имеющий стиль "height: 100%", выглядит как> 100%? - PullRequest
Новая
       5

Почему элемент, имеющий стиль "height: 100%", выглядит как> 100%?

0 голосов
/ 08 мая 2009

У меня есть страница, на которой во время загрузки страницы я помещаю абсолютный DIV на весь мой контент с помощью "height:100%", в котором говорится, что "страница загружается ...".

Однако из полосы прокрутки видно, что высота страницы равна 100% + высота содержимого.

Это немедленно исчезает, когда страница загружается, и абсолютный позиционированный оверлей DIV установлен на display:none.

Это происходит в Firefox 3, Chrome, IE6.

Любые идеи о том, как сделать рост: 100%, только 100% и не более? 

<html>
  <head>
     <style type="text/css">
         * html, * body {height: 100%; margin: 0; padding: 0}
            #message {background: black; height: 100%; left: 0; opacity: 0.15; position: absolute; top: 0%; width: 100%}
            #loading {height: 100%; left: 0; position: absolute; top: 45%; width: 100%; z-index: 2}
            #loading p {background: white; border: 2px solid #666; width: 180px}
     </style>
  </head>
  <body>
     <div id="grayout"></div>
     <div id="loading"><p>Page is loading...</p></div>
     <div id="content">
     // content is dynamically loaded into this div via AJAX
     </div>
  </body>
</html>

Обновление : похоже, проблема в том, что у меня "top: 45%". Как переместить этот DIV в центр страницы (так как это «страница загружает сообщение»), не вызывая этой проблемы снова?

Ответы [ 8 ]

8 голосов
/ 08 мая 2009

Если этот элемент имеет вертикальное заполнение или поле, он добавляется к высоте блока в соответствии со спецификацией CSS (см. Модель визуального форматирования для абсолютно позиционированных незаменяемых элементов ).

Редактировать top:45% перемещает ваш элемент на 45% вниз. Удалите его (top:0) или установите высоту элемента на auto (значение по умолчанию).

1 голос
/ 08 мая 2009

Вы пробовали: 

* html, * body {height: 100%; margin: 0; padding: 0;}

Что должно удалить также все отступы и поля со страницы.

0 голосов
/ 08 мая 2009

Ваш "загрузочный" div - это полная высота окна, он расположен на 45% сверху, поэтому он переполняет окно на 45%, давая вам полосу прокрутки.

Попробуйте переместить его в верхнюю часть страницы и выровнять текст по центру.

0 голосов
/ 08 мая 2009

Re: // Множество контента динамически загружается через AJAX

Есть ли в динамических данных неразрывные строки, или, возможно, изображения или текст, которые превышают пространство?

0 голосов
/ 08 мая 2009

Почти всегда я начинаю свой CSS со следующей строки: 

* {padding:0; margin:0}

Это должно исправить вашу проблему.

0 голосов
/ 08 мая 2009

При размещении HTML возникла проблема без вступительного текста .. 

<html>
  <head>
  </head>
  <body>
     <div style="height: 100%; background-color: blue;"></div>
  </body>
</html>
0 голосов
/ 08 мая 2009

Абсолютно позиционированные элементы вынимаются из потока страницы, поэтому div, вероятно, не помещается за контентом. Почему контейнерный элемент абсолютно позиционируется?

0 голосов
/ 08 мая 2009

Попробуйте добавить 

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

Нет похожих вопросов

...