divコンテンツのオーバーフローを防ぐ方法

私は、ウィンドウが縮小すると、サブディビジョンのコンテンツがカットオフになるというhtmlを持っています。一番外側のdivはオーバーフロー：autoで、スクロールバーがあります。 overflow：hiddenが複数の子divに設定されています。内部HTMLはいくつかのAPIから生成され、これらのオーバーフロープロパティをすべてリセットするのは実際的ではありません。divコンテンツのオーバーフローを防ぐ方法

私の質問は次のとおりです。

overflowプロパティは、まだ適用され、なぜこれらの子のdivの高さ/幅は、設定されていませんか？
子divのカットオフを防ぐ別の方法はありますか？親のdivに十分な高さがあることを確認するように？以下は

は私のhtmlの簡易版である：

<div id="main" style="width: 100%; height: 100%; overflow: auto; -ms-zoom: 1;" abp="1"> 
 
    <div style="box-sizing:border-box"> 
 
    <div style="overflow:hidden;text-align:left"> 
 
     <div id="SecListA" style="width: 100%; height: 100%; overflow: hidden; position: relative;"> 
 
     <div> 
 
      <span class="ttl" id="sectKey-18-HL" style="font-size: 20px; font-weight: 600;" abp="373">Section A</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div style="box-sizing:border-box"> 
 
    <div style="overflow:hidden;text-align:left"> 
 
     <div id="SecListB" style="width: 100%; height: 100%; overflow: hidden; position: relative;"> 
 
     <div> 
 
      <span class="ttl" id="sectKey-18-HL" style="font-size: 20px; font-weight: 600;" abp="373">Section B</span> 
 
     </div> 
 
     <table class="skTbl" id="MRLTable-CVIntList280"> 
 
      <thead abp="416"> 
 
      <tr class="visHid colHdr" abp="417"> 
 
       <th class="rIndent" abp="418"></th> 
 
       <th class="hlImp" style="width: 96%;" abp="419"></th> 
 
       <th style="width: 1%;"></th> 
 
       <th style="width: 1%;"></th> 
 
       <th style="width: 1%;"></th> 
 
       <th style="width: 1%;"></th> 
 
      </tr> 
 
      </thead> 
 
      <tbody abp="424"> 
 
      <tr style="display: none;" abp="425"> 
 
       <td abp="426"></td> 
 
      </tr> 
 
      <tr> 
 
       <td abp="428"></td> 
 
       <td abp="429"> 
 
       <div style="padding-left: 0px; display: inline-block;" abp="430"><span class="vbIcn icn icnMan" abp="431"><img src="C:\PROGRAM FILES (X86)\Y.png" abp="432"></span></div> subtitle A 
 
       </td> 
 
       <td abp="433"> 
 
       <span abp="434"></span> 
 
       </td> 
 
       <td abp="435"><span abp="436"></span></td> 
 
       <td abp="437"><span class="MRLRecFldHover" abp="438"></span></td> 
 
       <td abp="439"><span class="MRLRecFldHover" abp="440"></span></td> 
 
      </tr> 
 
      <tr title="Edit this item"> 
 
       <td abp="442"></td> 
 
       <td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah A</span> 
 
     </td> 
 
     <td abp="448"><span></span></td> 
 
     <td abp="450"><span></span></td> 
 
     <td abp="452"><span></span></td> 
 
     <td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span class="vbIcn icn icnDelete" abp="458"></span></span> 
 
     </span> 
 
     </span> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td colspan="5"> 
 
      <table class="skForceFitTbl skTbl" cellspacing="0" cellpadding="0" abp="462"> 
 
      <tbody abp="463"> 
 
       <tr class="noLn" abp="464"> 
 
       <td class="skForceFitCell" abp="465"> 
 
        <span abp="466">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t <table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tbody abp="468">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr abp="469">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td style="padding-left: 40px;" abp="470"></td>  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td style="width: 100%; text-align: left;" abp="471">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t some text for the ssdfasdfdsfffffffffffffffffffffffffffffffffffffffffffffffffffff. <br>dddddd  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </span> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
      </span> 
 
     </td> 
 
     </tr> 
 
     </tbody> 
 
     </table> 
 
     </td> 
 
     </tr> 
 
     <tr style="display: none;" abp="425"> 
 
     <td abp="426"></td> 
 
     </tr> 
 
     <tr> 
 
     <td abp="428"></td> 
 
     <td abp="429"> 
 
      <div style="padding-left: 0px; display: inline-block;" abp="430"><span class="vbIcn icn icnMan" abp="431"><img src="C:\PROGRAM FILES (X86)\Y.png" abp="432"></span></div> subtitle B 
 
     </td> 
 
     <td abp="433"> 
 
      <span abp="434"></span> 
 
     </td> 
 
     <td abp="435"><span abp="436"></span></td> 
 
     <td abp="437"><span class="MRLRecFldHover" abp="438"></span></td> 
 
     <td abp="439"><span class="MRLRecFldHover" abp="440"></span></td> 
 
     </tr> 
 
     <tr title="Edit this item"> 
 
     <td abp="442"></td> 
 
     <td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah A</span> 
 
    </td> 
 
    <td abp="448"><span></span></td> 
 
    <td abp="450"><span></span></td> 
 
    <td abp="452"><span></span></td> 
 
    <td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span class="vbIcn icn icnDelete" abp="458"></span></span> 
 
     </span> 
 
     </span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td colspan="5"> 
 
     <table class="skForceFitTbl skTbl" cellspacing="0" cellpadding="0" abp="462"> 
 
      <tbody abp="463"> 
 
      <tr class="noLn" abp="464"> 
 
       <td class="skForceFitCell" abp="465"> 
 
       <span abp="466">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t <table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tbody abp="468">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr abp="469">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td style="padding-left: 40px;" abp="470"></td>  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td style="width: 100%; text-align: left;" abp="471">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t some text for the testing. This text will get cutoff when the window is small enough.... <br>dddddd  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </span> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </span> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
    </td> 
 
    </tr> 
 
    <tr title="Edit this item"> 
 
     <td abp="442"></td> 
 
     <td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah B</span> 
 
    </td> 
 
    <td abp="448"><span></span></td> 
 
    <td abp="450"><span></span></td> 
 
    <td abp="452"><span></span></td> 
 
    <td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span></span></span> 
 
    </span> 
 
    </span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td colspan="5"> 
 
     <table cellspacing="0" cellpadding="0"> 
 
     <tbody> 
 
      <tr> 
 
      <td> 
 
       <span>  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t <table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tbody abp="468">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr abp="469">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td style="padding-left: 40px;" abp="470"></td>  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td style="width: 100%; text-align: left;" abp="471">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t some text for the testing. This text will get cutoff when the window is small enough.... <br>dddddd  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </span> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
     </span> 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
</div> 
 
</div> 
 
</div>

出典

2017-03-31 Hui Liu

このテキスト...

some text for the ssdfasdfdsfffffffffffffffffffffffffffffffffffffffffffffffffffff.

が最も可能性の高い原因である（それが数回表示されます）。それは、拡張されるべき表セルを強制する非常に長い「単語」を含んでいます。しかし、それは完全に非現実的です。実際の単語と実際のテキストを使用すると、シナリオ全体が変更されます。オーバーフローが働くだけでどのように

出典

2017-03-31 13:56:15 Johannes

厥 -

（コピーすることができますあなたのためのランダムなテキストを生成するページがありますが、テキストを入力したくない場合は、単に「blindtextジェネレータ」をグーグル。）。 divの内容をhiddenに設定した場合、コンテンツが境界の外側に流れても、外側に何が流れてもコンテンツは切り取られます。

マークアップを変更するのが理想的です。ただし、あれば本当には、あなたが!importantを使用して、CSSでそれをハックすることができません。

#main div { 
    overflow: initial !important; 
} 

#main { 
    width: initial !important; 
    overflow: initial !important; 

} 

div#SecListB { 
    overflow: initial !important; 
}

チェックアウトフィドルをsn3ll @here.

出典

2017-03-31 14:32:12 sn3ll

おかげで、CSSの学校では「overflowプロパティのみを語ります指定された高さのブロック要素のために働きますが、私のhtmlでは、私はしませんでした。 –

私が見ることができる限り、オーバーフローの問題は、高さではなく、幅でなければなりません。 – sn3ll

実際に私は高さの作品を作ろうとしていたので、あなたは十分に小さいウィンドウを縮小すると、下部のコンテンツがカットオフです。スクロールバーはまだありますが、スクロールしても下のテキストは表示されません... –

divコンテンツのオーバーフローを防ぐ方法

答えて

関連する問題