複数のテーブルを持つスクロール可能なdiv

Question

私は、行数が可変な複数のテーブルを含むdivがあり、このスクロールをスクロール可能にする必要があります。

<div style="overflow-y: scroll;"> 
    {% regroup documents by upload_time|date:" d F o" as documents_by_date %} 
    {% for document in documents_by_date %} 
    <table style="text-align: left; margin-top: 15px; width: 100%;"> 
    <tr> 
     <th width="70%">{{ document.grouper}}</th> 
     <th align="center"> Uploaded by </th> 
    </tr> 
    {% for doc in document.list %} 
    <tr> 
     <td> 
      <a href="{{ doc.docfile.url }}">{{ doc.filename }}</a> 
     </td> 
     <td align="center"> 
      {{doc.upload_user}} 
     </td> 
    </tr> 

    {% endfor %} 
    {% endfor %} 
    </table> 
</div> 

これは私にスクロールバーを示していますが、うまくいきません。私は、HTMLとCSSにはほとんど経験がない...

Answer 1

あなたはそれ以外の場合は100%高さを取るだけで、スクロールバーが表示されます、それはスクロール可能にするためにheightを指定する必要があります。

<div style="overflow-y: scroll;height:500px"> 
    [Omitted for brevity] 
</div> 

レッドよりおよそOverflow-y