Помогите решить проблему с дивом в таблице

partiz · April 3, 2008

В таблице есть 2 строки: верхняя имеет высоту=100%, а нижняя просто 100. В верхнее поле вписан див, в стиле которого так же стоит высота=100%, добавлен оверфлоу=авто и скролл=авто. Но проблема в том, что Опера некорректно отображает этот див (высота в 0 пиксель, не показывая содержимое дива и отображая только его только границы). Проблему с Оперой можно побороть, поставив в стиле дива свойство display, равное table. Но тогда начинает выпендриваться Фаерфокс, бесконечно увеличивая высоту дива и не показывая скроллбары.

Пример вот:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title>Мой чат</title>
</head>

<body style="margin: 0px; padding: 0px;">
<script language="JavaScript" type="text/javascript">
 function onSendMessage() {
 if (document.getElementById("message").value!="") {
 document.getElementById("chat").innerHTML=document.getElementById("chat").innerHTML+"
"+document.getElementById("message").value;
 document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
 document.getElementById("message").value="";
 document.getElementById("message").focus();
 }
 }
 function onPressEnter(myevent) {
 myevent = (myevent) ? myevent : event;
 if ('keydown' == myevent.type && 13==myevent.keyCode) onSendMessage();
 }
</script>
<table width="1000" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="100%">
 <td width="750" height="100%">
 <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
 <tr height="100%">
 <td id="pagechat" height="100%" valign="top" style="border:1px dotted #cccccc;">
 <div id="chat" style="display:table;height:100%;width:100%;OVERFLOW: auto; scroll: auto;">
 Тут чат.
 </div>
 </td>
 </tr>
 <tr>
 <td height="100">
 <b>Отправка сообщения</b> <span id="condition"></span>

 <input id="message" type="text" value="" style="width: 400px" onkeydown="onPressEnter(event)"/> <input type="button" name="" value=" Сказать " onclick="onSendMessage()"/>
 <script language="JavaScript" type="text/javascript">
 document.getElementById("message").focus();
 </script>
 </td>
 </tr>
 </table>
 </td>
 <td width="250" height="100%">
 <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td> </td>
 </tr>
 <tr height="100%">
 <td height="100%"> </td>
 </tr>
 <tr>
 <td> </td>
 </tr>
 </table>
 </td>
</tr>
</table>
</body>

</html>

Storm · April 3, 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" xml:lang="en" lang="en">
<head>
<title>Мой чат</title>
<style type="text/css">
/*<![CDATA[*/
html, body {height:100%;margin:0;padding:0;}
/*]]>*/
</style>
</head>

<body>
<script language="JavaScript" type="text/javascript">
 function onSendMessage() {
 if (document.getElementById("message").value!="") {
 document.getElementById("chat").innerHTML=document.getElementById("chat").innerHTML+"
"+document.getElementById("message").value;
 document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
 document.getElementById("message").value="";
 document.getElementById("message").focus();
 }
 }
 function onPressEnter(myevent) {
 myevent = (myevent) ? myevent : event;
 if ('keydown' == myevent.type && 13==myevent.keyCode) onSendMessage();
 }
</script>
<div id="chat" style="height:90%;width:100%;OVERFLOW: auto; scroll: auto;">
Тут чат.
</div>

<b>Отправка сообщения</b> <span id="condition"></span>

<input id="message" type="text" value="" style="width: 400px" onkeydown="onPressEnter(event)"/> <input type="button" name="" value=" Сказать " onclick="onSendMessage()"/>
<script language="JavaScript" type="text/javascript">
document.getElementById("message").focus();
</script>
</body>
</html>

partiz · April 4, 2008

К сожалению, это не решило проблемы. ((

Когда доктайп ставил, всег height=100% и wigth=100% ставят высоту и ширину страницы

Storm · April 4, 2008

Тогда, если не принципиально использовать именно этот доктайп, вот еще вариант:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Мой чат</title>
<style type="text/css">
body {margin:0;padding:0;}
</style>
<script language="JavaScript" type="text/javascript">
 function onSendMessage() {
 if (document.getElementById("message").value!="") {
 document.getElementById("chat").innerHTML=document.getElementById("chat").innerHTML+"
"+document.getElementById("message").value;
 document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
 document.getElementById("message").value="";
 document.getElementById("message").focus();
 }
 }
 function onPressEnter(myevent) {
 myevent = (myevent) ? myevent : event;
 if ('keydown' == myevent.type && 13==myevent.keyCode) onSendMessage();
 }
</script>
</head>

<body>
<table style="height:100%;">
<tr>
<td style="width:100%;height:100%;border:1px solid red;vertical-align:top;">
<div id="chat" style="height:100%;overflow:auto;scroll:auto;">
Тут чат.
</div>
</td>
</tr>
<tr>
<td style="height:100px;border:1px solid green;">
<b>Отправка сообщения</b> <span id="condition"></span>

<input id="message" type="text" value="" style="width: 400px" onkeydown="onPressEnter(event)"/> <input type="button" name="" value=" Сказать " onclick="onSendMessage()"/>
<script language="JavaScript" type="text/javascript">
document.getElementById("message").focus();
</script>
</td>
</tr>
</table>
</body>
</html>

partiz · April 4, 2008

У второго варианта проблема с шириной, опера глючит, если вводишь слишком длинное сообщение. Опера странная какая-то, чтобы корректно отображать желаемый див, его надо сделать блоком или таблицей, но в этом случае ругается ОгненнаяЛиса, т.к. она не понимает дива как блок или таблицу ((

если можно, то лучше исправить мой пример, чтобы все отображалось правильно, а не придумывать новые варианты...

ZoNT · April 4, 2008

ОгненнаяЛиса, т.к. она не понимает дива как блок

ФИГАСЕ. Я всегда считал, что див - это блок по умолчанию...

partiz · April 4, 2008

2 ZoNT ... я тоже много чего считал, посмотри мой пример и убедись.

Storm · April 4, 2008

чтобы див не тянулся по ширине, поставь ему фиксированное значение width

ZoNT · April 4, 2008

твой пример работает у меня в опере на ура!

ZoNT · April 4, 2008

но в этом случае ругается ОгненнаяЛиса, т.к. она не понимает дива как блок или таблицу

Это ересь какая-то. Вс? ФФ понимает...

partiz · April 4, 2008

2 ZoNT ))) ты прям как Ганс Христиан Андерсон (сказочник)... ты мой пример в ФФ тести (не просто открой, а напиши что-нибудь в поле для ввода и нажми на "Сказать")... а потом убери свойство "дисплей" и открой оперой, и снова тести...

з.ы. Эксплорер, кстати, оба варианта на "ура" понимает

partiz · April 4, 2008

2 Storm ... ок, спасибо! позже потестю, уже поздно

ZoNT · April 4, 2008

Зачем убирать дисплей, если и так нормально пашет?

Я вообще не понял, для чего тебе это надо? Может ты зря огород городишь? Может объяснишь суть, а мы тебе подск4ажем правильное решение?

partiz · April 4, 2008

Нужно сделать простой чат. Справа должно быть поле [пользователи] (ширина 250), в котором будут показаны юзеры онлайн, слева должно быть поле, которое будет занимать всю свободную часть экрана. В левом поле внизу расположено поле (высота 100), в котором человек будет писать сообщение, а вверху все свободное место занимает поле [чат], в котором будут выводиться сообщения.

Поле "пользователи" и поле "чат" - дивы со скролами, растянутые на всю свободную область отведенной для них рамки.

В примере выше я показал, как это все выглядит полностью с возможностью отправлять сообщения для проверки появления скроллов и т.д. Проблема в том, что див в поле "чат" не отображается как нужно в опере, если ему не поставлена фиксированная высота или не проставлено свойство дисплей. Если проставлено свойство дисплей, тогда в опере все ок, но Мазилла начинает загонять: сначала она показывает все правильно, но когда отправляешь сообщение, слой сдвигается на центр и начинает расти по мере отправки сообщений, скроллы при этом появляются не в диве (т.е. где должны), а у самой страницы, т.к. она безбожно растягивается.

Вот как выглядит структура, в поля "чат" и "пользователи" которой нужно вписать дивы с возможностью скролла:

<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
 <td width="100%" height="100%">
 <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
 <tr height="100%">
 <td id="pagechat" height="100%" valign="top" style="border:1px dotted #cccccc;">
 Чат
 </td>
 </tr>
 <tr>
 <td height="100">
 Отправка сообщения
 </td>
 </tr>
 </table>
 </td>
 <td width="250" height="100%" nowrap="nowrap">
 <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
 <tr>
 <td> </td>
 </tr>
 <tr height="100%">
 <td height="100%">
 Пользователи
 </td>
 </tr>
 <tr>
 <td> </td>
 </tr>
 </table>
 </td>
</tr>
</table>

В первом посте можно посмотреть рабочий пример с добавлением сообещний, и лучше тестировать на нем, т.к., например, ошибка отображения Мозиллой проявляется только при добавлении сообщений (т.е. изменения контента дива).

Storm · April 7, 2008

Наверное, при таких условиях задачу решить не удастся.

Пробовал писать для td#pagechat display:block;overflow:auto;, но в Опере он сжимается до минимально возможной высоты, если убрать display:block;, то не сжимается, но растягивается, при добавлении текста.

ZoNT · April 7, 2008

на - проверил - работает в ФФ, ИЕ, Опера, Сафари:

<head>
 <title>Мой чат</title>

 <script language="JavaScript1.2">
 function onSendMessage() {
 if (document.getElementById("message").value!="") {
 var obj = document.getElementById("chat");
 obj.innerHTML = obj.innerHTML+"
"+document.getElementById("message").value;
 var scroll = obj.scrollHeight - obj.offsetHeight;
 if (scroll<0) scroll = 0;
 obj.scrollTop = scroll;

 document.getElementById("message").value="";
 }

 document.getElementById("message").focus();
 }

 function onPressEnter(myevent) {
 myevent = (myevent) ? myevent : event;
 if (13==myevent.keyCode) onSendMessage();
 }
</script>
</head>

<body style="margin: 0px; padding: 0px;">

 <table width="750" height="100%" border="0" cellpadding="0" cellspacing="0">
 <tr height="100%">
 <td id="pagechat" height="100%" valign="bottom" style="border:1px dotted #cccccc;">
 <div id="chat" style="width: 100%; height: 100%; overflow: auto;">
 chat!
 <div>
 </td>
 </tr>
 <tr>
 <td height="100">
 <b>Отправка сообщения</b>

 <input id="message" type="text" value="" style="width: 400px" onkeydown="onPressEnter(event)"/>
 <input type="button" name="" value=" Сказать " onclick="onSendMessage()"/>
 </td>
 </tr>
 </table>

 <script language="JavaScript" type="text/javascript">
 document.getElementById("message").focus();
 </script>
</body>
</html>

Storm · April 7, 2008

Работает, если не поместить таблицу в структуру из этого ответа

http://forum.htmlbook.ru/viewtopic.php?pid=54836#p54572

Если поместить таблицу в эту структуру, прежняя проблема останется: Опера будет сворачивать div#chat до нескольких пикселей по высоте. По-моему у Оперы проблема с отображением вложенности нескольких блоков со 100%-ной высотой

ZoNT · April 7, 2008

Зачем помещать???

Storm · April 7, 2008

Хотя бы затем, что автор топика прив?л структуру страницы, на которой будет этот чат. От не? и надо плясать. Скорее всего можно переделать структуру таким образом, чтобы в Опере div не сплющивался, но автор может быть это сделает и сам.

ZoNT · April 7, 2008

Хотя бы затем, что автор топика прив?л структуру страницы, на которой будет этот чат. От не? и надо плясать.

Никогда не надо плясать от структуры! Надо сначала продумать как сделать так, чтобы было минимум объектов и работало везде, а потом накидать макет. Если он нерабочий то от него стоит отказаться сразу, а не пытаться хаками прикрутить функциональность...

Storm · April 7, 2008

Согласен.

На вид структура простая и рабочая, но Опера отображает е? некорректно.

Человек попросил ему помочь, набросал структуру.

Справа должно быть поле [пользователи] (ширина 250), в котором будут показаны юзеры онлайн, слева должно быть поле, которое будет занимать всю свободную часть экрана. В левом поле внизу расположено поле (высота 100), в котором человек будет писать сообщение, а вверху все свободное место занимает поле [чат], в котором будут выводиться сообщения.

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

Почему бы не решить проблему сразу целиком и полностью?

Я попробовал поместить таблицу с отправкой и сообщениями в div {float:left;}, а таблицу с списком юзеров онлайн в другой div {float:left;}, чтобы растолкать на странице эти блоки на свои места, но в этом случае в Мозилле скролл у div#chat не появляется, а он просто раст?т по высоте.

ZoNT · April 7, 2008

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

ZoNT · April 7, 2008

может это я тупой, может у меня ФФ какой дебильный, но вс? работает:

<head>
 <title>Мой чат</title>

 <script language="JavaScript1.2">
 function onSendMessage() {
 if (document.getElementById("message").value!="") {
 var obj = document.getElementById("chat");
 obj.innerHTML = obj.innerHTML+"
"+document.getElementById("message").value;
 var scroll = obj.scrollHeight - obj.offsetHeight;
 if (scroll<0) scroll = 0;
 obj.scrollTop = scroll;

 document.getElementById("message").value="";
 }

 document.getElementById("message").focus();
 }

 function onPressEnter(myevent) {
 myevent = (myevent) ? myevent : event;
 if (13==myevent.keyCode) onSendMessage();
 }
</script>
</head>

<body style="margin: 0px; padding: 0px;">

 <div style="position: relative; left: 20px; top: 10px; width: 500px; height: 500px; border: 1px solid red; float: left;">
 <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
 <tr height="100%">
 <td id="pagechat" height="100%" valign="bottom" style="border:1px dotted #cccccc;">
 <div id="chat" style="width: 100%; height: 100%; overflow: auto;">
 chat!
 <div>
 </td>
 </tr>
 <tr>
 <td height="100">
 <b>Отправка сообщения</b>

 <input id="message" type="text" value="" style="width: 400px" onkeydown="onPressEnter(event)"/>
 <input type="button" name="" value=" Сказать " onclick="onSendMessage()"/>
 </td>
 </tr>
 </table>
 </div>
 <div style="float: left; margin: 20px 0px 0px 50px; border: 1px solid green;"> asdfasdf sadf sdf sdfsdf sdf sf 
 aefsadf sdf sdfsadf</div>

 <script language="JavaScript" type="text/javascript">
 document.getElementById("message").focus();
 </script>
</body>
</html>

Storm · April 8, 2008

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

После body ид?т div с высотой 500px. Прописав фиксированную высоту, ты убрал возможность растягивания поля сообщений чата на вс? доступное пространство по высоте.

В левом поле внизу расположено поле (высота 100), в котором человек будет писать сообщение, а вверху все свободное место занимает поле [чат], в котором будут выводиться сообщения.

может у меня ФФ какой дебильный, но вс? работает

Если бы надо было сделать только для ФФ, давно бы сделали (он самый понятливый). Проблемы возникают в ИЕ и Опере.

ZoNT · April 8, 2008

не надо ля-ля:

<head>
 <title>Мой чат</title>

 <script language="JavaScript1.2">
 function onSendMessage() {
 if (document.getElementById("message").value!="") {
 var obj = document.getElementById("chat");
 obj.innerHTML = obj.innerHTML+"
"+document.getElementById("message").value;
 var scroll = obj.scrollHeight - obj.offsetHeight;
 if (scroll<0) scroll = 0;
 obj.scrollTop = scroll;

 document.getElementById("message").value="";
 }

 document.getElementById("message").focus();
 }

 function onPressEnter(myevent) {
 myevent = (myevent) ? myevent : event;
 if (13==myevent.keyCode) onSendMessage();
 }
</script>
</head>

<body style="margin: 0px; padding: 0px;">

 <div style="position: relative; left: 20px; top: 10px; width: 500px; height: 95%; border: 1px solid red; float: left;">
 <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
 <tr height="100%">
 <td id="pagechat" height="100%" valign="bottom" style="border:1px dotted #cccccc;">
 <div id="chat" style="width: 100%; height: 100%; overflow: auto;">
 chat!
 <div>
 </td>
 </tr>
 <tr>
 <td height="100">
 <b>Отправка сообщения</b>

 <input id="message" type="text" value="" style="width: 400px" onkeydown="onPressEnter(event)"/>
 <input type="button" name="" value=" Сказать " onclick="onSendMessage()"/>
 </td>
 </tr>
 </table>
 </div>
 <div style="float: left; margin: 20px 0px 0px 50px; border: 1px solid green;"> asdfasdf sadf sdf sdfsdf sdf sf 
 aefsadf sdf sdfsadf</div>

 <script language="JavaScript" type="text/javascript">
 document.getElementById("message").focus();
 </script>
</body>
</html>

Работает и в опере и в ФФ и в ИЕ - и вс? нормально!!! Только я одного не пойму: если надо растягивать таблицу на 100% от страницы, то зачем е? помещать в див???

Storm · April 8, 2008

Вот теперь согласен, работает!

Sign In

Помогите решить проблему с дивом в таблице

Question

Link to comment

Share on other sites

26 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

Join the conversation

Обсуждения

Important Information