Сделать таблицу с высотой = 100%, чтобы правильно содержать div с высотой = 100%

Question

У меня есть стол с высотой 100% и фиксированной позицией. В нем я хочу иметь div с высотой 100%, который дает прокрутку при переполнении.

Проблема в том, что таблица начинает вести себя странно, если я добавлю в div больше содержимого, чем может выдержать его высота.

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

Пожалуйста, поверьте мне на слово, что мне нужно, чтобы div был в таблице; Именно для макета я не потрудился промокнуть описание моей проблемы.

Но это мое единственное ограничение: самым внешним элементом должна быть таблица, а где-то внутри нее я хочу div. Если у вас есть предложение, где вы встраиваете div в другие элементы, пожалуйста, скажите мне!

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

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

Я даю вам код здесь, чтобы вы могли проверить его.

<table style='position: fixed; left: 0px; top: 0px; height: 100%;'>
  <tr><td style='height: 100%;'>
    <div style='height: 100%; overflow: auto;'>
      FRODO!
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      ...
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
  </td></tr>
</table>

Спасибо, ребята!

РЕДАКТИРОВАТЬ : Ответ на ваши ответы.

Valamo : overflow = auto для div означает, что свитки не видны, пока они не нужны, поэтому они должны работать. Но просто чтобы быть уверенным, что я уже попробовал overflow = scroll, наряду со многими другими вещами. Я не вижу, как установка типа документа изменит ситуацию.

Ettiene : установите div в height = 100%, затем поместите в него еще один div и установите его высоту = 100% и переполнение = auto, тогда у меня нет проблем с внутренним div; когда его содержание слишком много, он покажет свитки, в то время как внешний div остается на месте. Но если вы замените внешний div таблицей, у вас будут проблемы. Так что простая установка высоты элементов на 100% не является проблемой.

Есть еще идеи? : -)

Answer 1

<table style="position: absolute;width: 100%;height: 100%;">
  <tr>
     <td >
        <div style="height: 100%;postion:relative">
        Testing Charactors
        </div>
    </td>
 </tr>
</table>

использовать позицию: относительная высота родительского css get.

Answer 2

Добавлены некоторые CSS к вашему первоначальному примеру:

<table style='position: fixed; left: 0px; top: 0px; height: 100%; display: block; overflow: auto; position: fixed;'>
  <tr><td style='height: 100%; padding: 0 1.5em;'>
    <div style='height: 100%; overflow: auto;'>
      FRODO!
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      ...
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      ...
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      ...
    </div>
  </td></tr>
</table>

overflow: auto и display: block на столе для Firefox et al. overflow: auto на div есть для IE.

Answer 3

Мне удалось выполнить эту работу с вложенными таблицами для текущего проекта.Плагин Google Планета Земля был в div, который должен был заполнить весь экран и соответственно изменить его размер.Я дал ID как вложенным таблицам, так и всем задействованным ячейкам таблицы и установил все их высоты при изменении размера:

$(function() {
    $(window).resize(function() {
        $('#main_table').height($(window).height() - $('#main_table').offset().top);
        $('#main_td').height($(window).height() - $('#main_td').offset().top);
        $('#main_table2').height($(window).height() - $('#main_table2').offset().top);
        $('#main_td2').height($(window).height() - $('#main_td2').offset().top);
        $('#map_canvas').height($(window).height() - $('#map_canvas').offset().top);
    });
    $(window).resize();
});

Работает более чем достаточно для моего проекта в IE8 и Chrome.

Answer 4

Не уверен, что я делаю это неправильно, но использование процентов для height на <div> в таблицах, похоже, полностью игнорируется. Поведение является последовательным независимо от%. Мне удается только уменьшить div с height, указанным в пикселях.

И, кстати, doctype определяет boxmodel, что может повлиять на то, как этот сценарий обрабатывается (однако я не думаю, что это так). (Подробнее: http://www.quirksmode.org/css/quirksmode.html)

Answer 5

вы можете попробовать min-height, а в IE использовать! Важное взломать

Answer 6

Вы можете попробовать 'min-height', но это не работает в IE. ; -)

В общем, я рекомендую избегать использования 100% высоты div.

Посмотрите на вопрос Div 100% высоты работает в Firefox, но не в IE , где есть аналогичная проблема.

Answer 7

Я думаю, что по крайней мере один из ваших элементов контейнера, то есть таблица или div должны иметь значение высоты, отличное от%. Когда содержание слишком много для чего-то с высотой 100%?

Answer 8

Для прокрутки содержимого необходимо использовать overflow:scroll;

Также убедитесь, что вы используете тип документа.