1

私は古いコードに取り組んでいるため、これ以上の構造的な変更 (テーブルの削除など) を行うことはできません。回答する際はその点に注意してください。

私の問題は、ネストされたテーブルがいくつかあり、列内に div を配置したことです。クエリの結果（AJAXで作成）に応じて、JavaScriptで動的に作成されたチェックボックスとラベルを入力するdiv。問題は、コンテンツに合わせて DIV が大きくなり、レイアウト全体が台無しになっていることです。

<table border = "0" width="470px">
  <tr>
    <td height="10px">
      <table>
    <tr>
          <td width="200px">                                    
        <font class="section_font">
          <label id="feedbackLabel">Metadata name:</label>
        </font>
      </td>
      <td align="right" width="170px">
         <font class="section_font">
          <input id="selAllCheckbox" type="checkbox" onclick="doSelectAll()">
              <label id="selAllCheckboxLabel">Select all</label>
         </font>
           </td>
    </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td height="100px">
      <div id="metadata_names" style="overflow:auto; border: 0px solid gray">
      </div>
    </td>
  </tr>
</table>

PS。これに対する回避策を見つけました: div に新しいオブジェクトを追加した後、DIV のサイズを再度変更します: myDiv.style.height="100px"; とにかくありがとう、私もあなたの解決策を試してみます。

PS1。どちらのソリューションも機能します。ただし、ページ内の他のものから明確に分離できるため、Umesh が提案したものを使用します。

4

2 に答える 2

2

divのスタイルプロパティの下の高さを100％にして、親の最大高さ、つまりあなたの場合はtdに従うようにします。コンテンツを水平方向および/または垂直方向にスクロールする場合は、「overflow：scroll」を含めることもできます。

于 2013-01-14T08:39:56.743 に答える
1

div コンテナーを使用し、それにクラスを割り当てます。このdiv内に日付を入力してください。次に、CSS を使用して固定の高さを割り当てます。

HTML:

<div class="container"> 
    <!-- Your data -->
</div>

CSS:

.container{  
    height: 123px;
    overflow: scroll;    
}
于 2013-01-14T07:10:13.090 に答える