Интересная проблема с высотой елемента

Torkvemada · March 20, 2008

В общем, проблема такая.

Есть елемент, который должен растягиваться на высоту всей страницы, то есть height: 100%;

Этот елемент генерируется на страницу через JS. Проблема в том, что при первых заходах на сайт, нужный елемент не растягивается на полную высоту сайта, а оставляет небольшие пустые промежутки сверху и снизу елемента. При последующих обновлениях страницы все стабилизируеться.

Мои догадки по поводу причины проблемы таковы:

Пока все картинки сайта еще не загрузились высота всей страницы меньше, чем она выходит после загрузки всех картинок. И паралельно генерируеться нужный мне елемент с высотой страницы, которая еще не полностью загружена. А когда страница полностью загружаеться - высота нужного елемента уже не увеличиваеться.

Какие есть предположительные решения этой проблемы?

Надеюсь, изложил понятно. Буду признателен за советы. Спасибо.

ZoNT · March 20, 2008

height: 100%; - проблем никаких не вижу...

Torkvemada · March 20, 2008

ZoNT said:
height: 100%; - проблем никаких не вижу...

Вы, написали пример описанной мною конструкции и не обнаружили проблем, или же Вы просто считаете, что проблем в принципе быть не должно?

Это ведь вещи разные. Если у Вас есть написанная подобная конструкция, в которой не возникает таких проблем - прошу поделиться. Базируя советы чисто не теоретических догадках мы далеко не уедим.

homm · March 20, 2008

Torkvemada said:
Базируя советы чисто не теоретических догадках мы далеко не уедим.

Базируя вопросы на теоретически рассуждениях мы так-же не уедем далеко. Код давай.

Torkvemada · March 21, 2008

homm said:

Torkvemada said:
Базируя советы чисто не теоретических догадках мы далеко не уедим.
Базируя вопросы на теоретически рассуждениях мы так-же не уедем далеко. Код давай.

Рассуждения мои практические а не теоретические, уважаемый. Я описал проблему в деталях.

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

homm · March 21, 2008

Код давай.

Блин, о чем кроме как о сферических конях в вакууме может идти речь, если ты даже браузер не указал.

Vitesse · March 21, 2008

homm said:
Код давай.

+1

Torkvemada · March 21, 2008

Оригинал давать нет смысла, но эту ситуацию я на другом примере показал, вы правы, с кодом проще.

<style type=text/css>
body {
margin: 0;
}
.table {
height: 100%; width: 100px;
background-color: green;
float: left;
}
</style>

<table height="100%">
 <tr>
 <td>
 <script language="javascript">
 document.writeln ('<table class=table><tr><td></td></tr></table>');
 </script>
 </td>
 <td>
 <p>Flower</p>
 <img src="1.jpg"><img src="2.jpg">

 <img src="3.jpg"><img src="4.jpg">

 <img src="5.jpg"><img src="6.jpg">

 <img src="7.jpg"><img src="8.jpg">

 <img src="9.jpg"><img src="10.jpg">

 <p>Flower</p>
 </td>
 <td>
 <script language="javascript">
 document.writeln ('<table class=table><tr><td></td></tr></table>');
 </script>
 </td>
 </tr>
</table>

http://www.world.in.ua/height/height.html

Браузеры.. Прошу прощения, забыл сказать. Проблема возникает только в Mozilla! Opera и IE отображают как надо.

Как видим, зеленые полоски по краям фотографии, которая загружаеться по кусочкам, при первой загрузке страницы не растягиваються по высоте всей страницы. При обновлении уже все нормально. Моя теория подтвердилась.

Есть догадки по поводу того, что можно сделать?

klierik · March 22, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

 <style type="text/css">

 * {outline: none; margin:0; padding:0; border: none;}

 html,body {height: 100%;}

 table, tr, td {height:100%;}

 </style>

</head>

<body>

 <table>
 <tr>
 <td>
 <script language="javascript">
 document.writeln ('<table class=table><tr><td></td></tr></table>');
 </script>
 </td>
 <td>
 <p>Flower</p>
 <img src="1.jpg"><img src="2.jpg">

 <img src="3.jpg"><img src="4.jpg">

 <img src="5.jpg"><img src="6.jpg">

 <img src="7.jpg"><img src="8.jpg">

 <img src="9.jpg"><img src="10.jpg">

 <p>Flower</p>
 </td>
 <td>
 <script language="javascript">
 document.writeln ('<table class=table><tr><td></td></tr></table>');
 </script>
 </td>
 </tr>
 </table> 

</body>
</html>

try this please...

Sign In

Интересная проблема с высотой елемента

Question

Torkvemada

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

ZoNT

Link to comment

Share on other sites

Torkvemada

Link to comment

Share on other sites

homm

Link to comment

Share on other sites

Torkvemada

Link to comment

Share on other sites

homm

Link to comment

Share on other sites

Vitesse

Link to comment

Share on other sites

Torkvemada

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information