Jump to content
  • 0

Динамическая высота страницы в IE

ashdesigner

Asked by ashdesigner,

 Share

Question

ashdesigner Explorer

ashdesigner

Posted
Posted

Добрый день, возникла проблема следующего характера: неправильное позиционирование слоя в IE по нижней границе документа при динамическом изменении высоты страницы. А именно, когда высота документа увеличивается, то слой, привязанный к нижнему краю страницы, остается в IE на своем месте, а контент "заползает" под него (пример смотрите вот здесь: www.lightfood.ru/menu). Есть документ XHTML, в котором есть шапка, контентная часть и подвал. При этом подвал прикрепляется к нижней части страницы с помощью CSS. В FF и Opera все работает корректно, в IE тоже - но только до тех пор, пока страница не начинает увеличиваться по вертикали (в моем случае речь идет о развертывании списков средствами JS, см. URL).

Привожу упрощенную схему документа:

<html>
<body>

<div id=container>

 <div id=header>...</div>
 <div id=content>...</div>
 <div id=footer>...</div>

</div>

</body>
</html>

файл CSS:
————-

body {
 min-height: 100%;
 height: 100%;
}

#container {
 min-height: 100%;
 height: 100%;
 position: absolute;
 width: 100%;
}

#footer {
 width: 100%;
 height: 100px;
 display: block;
 position: absolute;
 bottom: 0px;
 left: 0px;
}

P.S. Фишка в том, что если у слоя #footer прописать position: static; то в IE подвал начнет сдивгаться вместе с контентом - но на страницах, где контента меньше, чем полная высота экрана, подвал не "прилипает" к нижнему краю, а также верстка перестает корректно отображаться в FF и Opera. Народ, помогите, если кто реально знает, как обойти этот косяк.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
ashdesigner Explorer

ashdesigner

Posted
  • Author
Posted
Наконец-таки понял проблему. Тема открыта.
А именно, когда высота документа увеличивается, то слой, привязанный к нижнему краю страницы, остается в IE на своем месте, а контент "заползает"

1.А что вы ожидаете если у вас слои абсолютно-спозционированны(кстати непонятно зачем)?

2. Локализированный код без доктайпа - рассмотрению не подлежит.. если конечно не совсем примитивный вопрос.

Насчет п.1: я сейчас дам ссылку на один пример, который, на мой взгляд, достаточно лаконичен - и вы все поймете:

http://forums.avalon.ru/forum/topic.asp?TOPIC_ID=6669

Насчет п.2: я указал в своем первом посте, что документ XHTML. Если этого не достаточно, привожу код заголовка полностью:

quot;-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept