div наследовать ширину и высоту и прокрутку

Question

Как я могу сделать DIV наследовать его ширину и высоту из своего контейнера без фиксированной определенной высоты и ширины, по умолчанию покрыть всю область внутри контейнера и прокручивать вместо увеличения ее высоты или ширины , например

<td style="width:400px; "> 
<div style="overflow:scroll; "> 
</div> 
</td> 

Этот DIV должен охватывать 400 пикселей, а когда содержимое превышает эту ширину, оно должно прокручиваться. Контейнер может быть TD или SPAN. Один из подходов может заключаться в том, чтобы иметь класс CSS с определенной шириной и применять как к контейнеру, так и к div. Но я не знаю, где будет использоваться этот DIV и какова ширина его контейнера.

Редактировать 1 Установив max-width на 100px, я получаю то, что я хотел, но в противном случае он увеличивает ширину контейнера. Вероятно, это связано с тем, что контейнер имеет ширину в%. Мне кажется, мне нужно найти начальную ширину контейнера, а затем установить максимальную ширину DIV. Это?

Редактировать 2 В этом Div есть сетка. Когда максимальная ширина определена в стиле DIV, она отражает поведение, которое мне нужно, когда оно задано через JS. Ширина в порядке, когда страница загружается, но когда нажимается ссылка для загрузки данных внутри сетки, она теряет максимальную ширину имущество.

<script type="text/javascript"> 
    var w = document.getElementById("divgrid").style.maxWidth; 
    if (w == null || w == NaN || w <= 0 || w.toString() == '') 
    w = document.getElementById("divgrid").offsetWidth; 
    document.getElementById('divgrid').style.maxWidth = w + 'px'; 
</script> 

Answer 1

width:100%; height:100%; overflow:scroll; 

Answer 2

Вы выбрали два интересных элементов контейнера, так как пролеты имеют display значение по умолчанию inline и таблицы имеют значение по умолчанию table. Ничто не соответствует свойству overflow, поэтому для создания полос прокрутки вокруг элемента div вам необходимо установить их на display:block. Использование выше пример:

HTML

<table> 
    <tr> 
     <td> 
      <div>...lots of text here...</div> 
     </td> 
    </tr> 
</table> 

CSS

table{ 
    height:100px; 
    width:100px; 
    display:block; 
    overflow:scroll; 
} 

Aand вот jsFiddle

Answer 3

overflow-x:scroll использование в table или td

, например.

<table style="width:400px; overflow-x:scroll;"> 
    <tr> 
    <td><div>content</div></td> 
    </tr> 

</table>