0

HTMLコードを書いているときにシナリオがあります..いくつかのフローティングdivの間に...絶対位置の2つのdivがあります..そして問題を示すためにサンプルのjsfiddleを作成しました..たとえば「CSS」のような長いテキストを入力してみてください絶対位置で隠されたオーバーフロー・どのように防ぐか...オーバーフローのサイズ：位置で隠されたdiv：内部の絶対1つ・CSS / HTML..."..そして送信ボタンをクリックします...それはmainContainerに追加されます。 ..テキストが長すぎて、そのコンテナdivがautoに設定されているため、テキストボックスコンテナdivの後ろに拡張して移動します。とにかく、メインに必要な高さに応じてテキストボックスコンテナを下に移動します。コンテナを使用して表示領域を取得し、必要がない場合は上に移動します。1つの要因により、絶対位置を使用します。cssでwidth：100％を追加する場合のように。そのdivは通常、左マージンとそのdivの開始の間にギャップを残します...そしてそれは空白として表示されます..フィドルを確認してください。

http://jsfiddle.net/EVwSG/5/

HTML入力

CSS

#mainContainer{
width:50%;
height:auto;
position:absolute;
left:0;
top:20px;
background-color:#000000;
color:#ffffff;
font-size:19px;
}


 #textboxContainer{
position:absolute;
width:100%;
height:100px;
background-color:green;
top:60px;
left:0;
}

#inputBox{
width:80%;
}​

</ p>

4

2 に答える 2

2

問題は position: absolute の使用にあります。これを両方の div 要素から削除し、それらをブロック レベルの要素にできるようにすると、すべてが期待どおりにレンダリングされます。これらを絶対に配置する必要がある場合は、相対位置の親要素を作成して、ページ上の他の div の背後に表示されないようにすることをお勧めします。

他の回答が指定するように高さを計算できますが、可能であればブラウザに任せるのが最善だと思います。

于 2012-11-01T07:19:39.383 に答える
0

最も簡単な解決策は、新しい要素の高さを取得してから、上部を追加することです。

$("#textboxContainer").css("top", $("#mainContainer").height() + 20);

これにより、下部のコンテナが正しい高さまで移動します。実用的なソリューションへのリンクは次のとおりです。

于 2012-11-01T07:19:40.210 に答える