javascript - divは幅と高さを継承し、スクロールします

Question

高さと幅を固定せずにDIVに幅と高さをコンテナから継承させ、デフォルトでコンテナ内の領域全体をカバーし、高さまたは幅を増やす代わりにスクロールするにはどうすればよいですか。例えば

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

この DIV は 400px をカバーする必要があり、コンテンツがこの幅を超えるとスクロールする必要があります。コンテナーは、TD または SPAN の可能性があります。1 つのアプローチは、定義された幅を持つ CSS クラスを持ち、コンテナーと 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

またはoverflow-x:scrollで使用tabletd

例えば

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

</table>

Answer 2

スパンのデフォルト値は。であり、テーブルのデフォルト値は。であるため、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;
}

そしてここにjsFiddleがあります

Answer 3

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