Jump to content
  • 0

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

partiz

Asked by partiz,

 Share

Question

partiz Explorer

partiz

Posted
Posted

В таблице есть 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>

Link to comment
Share on other sites

26 answers to this question

Recommended Posts

  • 0
Storm Explorer

Storm

Posted
Posted

Доктайп указать забыл.

Наверное вот этот

<!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>

Link to comment
Share on other sites
  • 0
Storm Explorer

Storm

Posted
Posted

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

<!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>

Link to comment
Share on other sites
  • 0
partiz Explorer

partiz

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites
  • 0
partiz Explorer

partiz

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
partiz Explorer

partiz

Posted
  • Author
Posted

Нужно сделать простой чат. Справа должно быть поле [пользователи] (ширина 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>

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

Link to comment
Share on other sites
  • 0
Storm Explorer

Storm

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

Posted
Posted

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

<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>

Link to comment
Share on other sites
  • 0
Storm Explorer

Storm

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
Storm Explorer

Storm

Posted
Posted

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

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

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

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

Link to comment
Share on other sites
  • 0
Storm Explorer

Storm

Posted
Posted

Согласен.

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

Posted
Posted

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

<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>

Link to comment
Share on other sites
  • 0
Storm Explorer

Storm

Posted
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

Posted
Posted

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

<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% от страницы, то зачем е? помещать в див???

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

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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