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

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>

partiz · April 11, 2008

2 ZoNT и Storm... огромное спасибо я просто программист, в вопросах нарезки и стилей не очень понимающий... очень помогли! )))

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

Sign In

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

Question

partiz

Link to comment

Share on other sites

26 answers to this question

Recommended Posts

partiz

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information