И снова высота 100 в ИЕ

LikeAPilot · April 15, 2008

Таблица. Три строчки. Верхняя и нижняя фиксированная высота. Средняя тянется на 100%.

Вопросы:

почему ИЕ растягивает среднюю неправильно?

как с этим правильно бороться?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css"> 
 <style type="text/css">

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

td {
 padding: 0;
 }

table {
 border-collapse: collapse;
 height:100%;
 width: 100%;
 border-spacing: 0;
 }
 </style>
</head>

<body>
<table>

<tr><td bgcolor="blue" height="150px">raz</td></tr>

<tr><td bgcolor="lightblue" height="100%">dva</td></tr>

<tr><td bgcolor="blue" height="150px">tri</td></tr>

</table>
</body>
</html>

Shuranka · April 15, 2008

Вс? правильно. Средняя полоса равна 100% высоты экрана, но так как у первой строки высота 150px, то средняя полоса на эту высоту и смещается вниз. То есть нижняя граница средней полосы будет располагаться в позиции 150px+100% высоты экрана.

~Kitty~ · April 15, 2008

И вообще в записи height="150px" уберите px - это неправильно. Ситуации это не меняет, но запись неверная.

Вообще, у вас доктайп блокирует высоту у td судя по всему.. Потому что, если его убрать и убрать height="100% у средней td, то вс? правильно отображается..

LikeAPilot · April 15, 2008

~Kitty~

достаточно убрать "http://www.w3.org/TR/html4/loose.dtd" чтобы все работало как надо, но тогда ссылка на доктайп неправильная и браузеры работают в quirks mode, что неправильно.

Shuranka

средняя должна растягиваться на 100 процентов высоты ячейки таблицы, которая равна высоте экрана. То есть dva=100% - (150+150)

если я ошибаюсь, подскажите свой вариант.

Scrum · April 15, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
 <style type="text/css">

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

td {
 padding: 0;
 }

table {
 border-collapse: collapse;
 height:100%;
 width: 100%;
 border-spacing: 0;
 }
 </style>
</head>

<body>
<table cellspacing="0">

<tr><td bgcolor="blue" height="150">raz</td></tr>

<tr><td bgcolor="lightblue">dva</td></tr>

<tr><td bgcolor="blue" height="150">tri</td></tr>

</table>
</body>
</html>

LikeAPilot · April 15, 2008

Scrum

как я уже написал выше:

в вашем примере ссылка на доктайп неправильная и браузеры работают в quirks mode, что неправильно.

Scrum · April 15, 2008

узайте js тогда.

~Kitty~ · April 15, 2008

Да я знаю, что это не правильно.. А если попробовать сделать ссылку на другой? Или нужен принципиально именно этот? /*я не знаю, поможет ли это.. просто предлагаю*/

LikeAPilot · April 15, 2008

~Kitty~

я не знаю в каком доктайпе осутствует эта проблема у ИЕ. если вообще такое решение возможно.

Scrum

покажите пример js который исправляет ситуацию.

И вс?-таки хотелось бы узнать способ без явы.

Scrum · April 15, 2008

LikeAPilot

Давайте ка поподробнее, чем вас напугал мой пример ? да quirks mode и ?

Scrum
покажите пример js который исправляет ситуацию.

С помощью JS надо не поправлять ситуацию, а описать поведения блока (для вашего случая высоты).

LikeAPilot · April 15, 2008

да ничем не напугал

Задача - сверстать валидный код, соответствующий стандартам.

Если верстать по стандартам, то нужно указывать соответствующий доктайп.

Доктайп указан.

Теперь задача сверстать кроссбраузерно. Опера и Фаерфокс молодцы, а ИЕ не молодец. Значит задача сводится к поиску костыля для него. То есть хака, который и эксплореру говорит как правильно отображать и другим не мешает.

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

То есть мы отошли от главной задачи - соответствие стандартам.

Если не указывать полную ссылку на доктайп, то зачем вообще его указывать?

ZoNT · April 15, 2008

А кто вам сказа, что браузеры "по стандартам" выводят вс? одинаково??? Каждый прочитал стандарт и понял его по своему

LikeAPilot · April 15, 2008

ZoNT

они не выводят одинаково к сожалению. Но они должны к этому стремиться Для этого стандарты и существуют.

При переходе на новую версию стандартов обычно поддерживаются старые стандарты.

Вот если сейчас создать сайт без поддержки нынешних стандартов, то позже (к примеру хтмл 5-6-7) он развалится.

А если сейчас указать доктайп и сверстать по стандартам, то шансов на то, что он поедет гораздо меньше. Он просто будет отображаться по старым.

Если же не указывать доктайп сейчас, то позже, сайт, сверстанный старым способом, будет показываться по новым стандартам. И скорее всего там будет все очень плохо

Shuranka · April 15, 2008

Вот так попробуй. Проверил в IE, Opera, Mozilla Firefox, Netscape Navigator. Отображается так, как нужно.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css"> 
 <style type="text/css">

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

td {
 padding: 0;
 }

table {
 border-collapse: collapse;
 height:100%;
 width: 100%;
 border-spacing: 0;
 background-color:lightblue;
 }
div{height:150px;width:100%;background-color:#0000FF;}
 </style>
</head>

<body>
<table>

<tr><td valign="top">
<div>
raz
</div>
</td></tr>

<tr><td>dva</td></tr>

<tr><td valign="bottom">
<div>
tri
</div>
</td></tr>

</table>
</body>
</html>

Scrum · April 15, 2008

И вс?-таки хотелось бы узнать способ без JS

на данный момент либо quirks mode либо JS

ZoNT · April 15, 2008

ZoNT
Вот если сейчас создать сайт без поддержки нынешних стандартов, то позже (к примеру хтмл 5-6-7) он развалится.

Это сколько ж надо не заходить на сайт и не обновлять контент/дизайн, чтобы дождаться когда он развалится???

Я вот использую quirks и не заметил пока отличий ИЕ6 от ИЕ7 в этом плане. И ФФ2 от ФФ3 тоже... Диз один-в-один и не разваливается...

LikeAPilot · April 15, 2008

Shuranka

Спасибо. Интересный способ. Но средняя часть не растягивается на 100%. Она растягивается по количеству контента. Это можно заметить если убрать бэкграунд колор у всей таблицы и поставить его в среднюю ячейку.

Да и вообще уж лучше тогда на дивах целиком делать чем так

homm · April 15, 2008

И вс?-таки хотелось бы узнать способ без JS
на данный момент либо quirks mode либо JS

? либо глаза на одно сообщение вверх поднять?

Scrum · April 15, 2008

И вс?-таки хотелось бы узнать способ без JS
на данный момент либо quirks mode либо JS
? либо глаза на одно сообщение вверх поднять?

либо внимательно первый пост читать.

Shuranka · April 15, 2008

либо внимательно первый пост читать.

Так у меня там таблица, просто в верхнюю и нижнюю ячейку вставлены блоки.

Shuranka
средняя должна растягиваться на 100 процентов высоты ячейки таблицы, которая равна высоте экрана. То есть dva=100% - (150+150)
если я ошибаюсь, подскажите свой вариант.

Человек попросил показать свой вариант, я показал.

homm · April 15, 2008

либо внимательно первый пост читать.

безусловно

Scrum · April 15, 2008

либо внимательно первый пост читать.
Так у меня там таблица, просто в верхнюю и нижнюю ячейку вставлены блоки.

Средняя тянется на 100%.

тянется ? а если надо valign="top" что мы увидим ?

кажется все прекрасно поняли проблему, или только кажется ?

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

И о вариантах

более приближен к нужному, но не является решением.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='ru'>
<head>
<title>test</title>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<style type='text/css'>
/*<![CDATA[*/
html, body {
 height:100%;
 padding:0;
 margin:0;
}
table {
 height:100%;
 border-collapse: collapse;
}
td {
 padding: 0;
 vertical-align:top;
 border: 1px solid silver;
}
.all_space {
 height:59%;
}
.bottom_space, top_space {
 height:150px;
}
/*]]>*/
</style>
</head>
<body>
 <table>
 <tr class='bottom_space'>
 <td> нижняя строка..... </td>
 </tr>

 <tr class='all_space'>
 <td> эта строка должна занимать все свободное место........ </td>
 </tr>

 <tr class='bottom_space'>
 <td> нижняя строка..... </td>
 </tr>
 </table>
</body>
</html>

homm · April 15, 2008

Scrum, прошу прощения, посмотрел только на результат.

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

Shuranka · April 15, 2008

Scrum, в представленном тобой варианте при просмотре в опере с разрешением 1280х1024 появляется верт. прокрутка. Небольшая, в пределах 5рх, но вс? же есть.

ZoNT · April 15, 2008

в представленном варианте высота первой и последней ячейки в ФФ 161 пиксель при разрешении 1650х1080

Scrum · April 15, 2008

1280х1024 Опера9.26 ФФ2.0.0.13 EI6.0 - 150px

Sign In

И снова высота 100 в ИЕ

Question

Link to comment

Share on other sites

35 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information