Сделайте стол с высотой = 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> 

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

EDIT: Ответ на ваши ответы.

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

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

Больше идей? :-)

Answer 1

Чтобы иметь свиток контента, вам нужно использовать overflow:scroll;

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

Answer 2

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

Answer 3

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

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

Посмотрите на вопрос Div 100% height works on Firefox but not in IE, который имеет аналогичную проблему.

Answer 4

можно попробовать мин-высоту, а в IE Используйте важно! Hack

Answer 5

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

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

Answer 6

Добавлены некоторые 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 и др. overflow: auto на div есть для IE.

Answer 7

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

$(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 8

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

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