Пусть стол растет вертикально с расширяющимся делителем

Question

В настоящее время у меня есть:

<div class="generic-block-70">
    <div class="generic-content-70">
        <table id="voteBlock">
            // stuff
    </table>
    </div>
</div>

Однако, поскольку generic-block-70 и generic-content-70 не имеют установленной высоты, и они расширяются по мере добавления текста, я не могу просто установить свойстиль таблицы к height: 100%;.

Есть ли способ обойти это?

JSFiddle: http://jsfiddle.net/2vLEL/

Answer 1

Установите overflow: auto; на своих родителей div.

http://jsfiddle.net/2vLEL/2/

.generic-content-70 {
    overflow: auto;
}

Answer 2

Думаю, у меня была похожая проблема. Вот как я это решил. У меня есть вложенные таблицы в таблицах. Пользователи нажимали кнопку, и Javascript создавал новые строки и ячейки таблицы и заполнял ячейку данными из формы. Чтобы заставить ячейку переносить текст, а не расширяться по горизонтали, мне пришлось использовать тег <div></div> внутри ячейки. Чтобы заставить «таблицу» НЕ расширяться по вертикали при добавлении новых строк таблицы, мне пришлось поместить <div></div> теги ниже <td>, содержащего.

Итак, HTML, созданный из моего javascript, может выглядеть следующим образом.

<table id="root">
 <tr id="A">
  <td id="1" style="width:200px">Content</td>
  <td id="2" style="width:530px">
   <div height="correct_height" overflowY="auto">
    <table id="comments_table" style="width:510px table-layout:fixed">
     <tr>
      <td style="word-wrap:break-word">
       <div style="width:480px;white-space:nowrap">Comments</div>
      </td>
     </tr>
    </table>
   </div>
  </td>
 </tr>
 .
 .
 .
</table>

Первый <td id="1"> создается функцией, которая запускается первой. Вторая <td id="2"> создается функцией, которая запускается после, и она захватывает высоту <td id="1">, так что высота 2-й ячейки в строке зависит от высоты 1-й ячейки в строке. Ширина устроена таким образом, чтобы освободить место для вертикальной полосы прокрутки.

Вы должны вычесть любые используемые вами отступы. Например, если два элемента имеют style="padding:5px", то это означает 5top 5bottom x 2 элемента. Итак:

var correct_height = A.offsetHeight - 20;

Answer 3

Код зависит от намерения:

• Если вы хотите заблокировать стол по высоте, присвойте ему высоту: NNpx;
• Если вы хотите заблокировать divдля высоты, дайте ему высоту: NNpx;и переполнение: ММ;в зависимости от ваших потребностей