1

以下のファイルを html 形式で保存すると、垂直スクロール バーが表示されます。の高さから

<div class="tabData" id="tab3data" style="visibility: visible;">

が設定されていない場合、すべてのコンテンツに合わせて自動的に拡張されるべきではありませんか?

<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        .tabData
        {
            width: 100%;
            background-color: Yellow;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="tabData">
        <div style="height: 390px; background-color: Green;">
            <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
            </div> 
        Hello
    </div>
</body>

4

5 に答える 5

0

height: 390px;の内側divにインラインが.tabDataあり、そのコンテンツがその高さに収まりません。cssoverflow: auto;の親 ( tabData) は、その理由で垂直スクロールをレンダリングします。

現在の構造を維持したい場合の修正は次のとおりです。
修正：http://jsfiddle.net/QvMfJ/

于 2013-04-10T18:49:18.250 に答える
0

div.tabData子要素の合計の高さによって高さが決定される親コンテナーがあり、そのうちの 2 つは内部<div>ブロックと、"Hello" という単語を含む無名ブロックです。

内側divの高さは 390px で、「Hello」の行は約 1.5em を占めています。したがって、黄色の背景を持つ親要素は、390px の内部 div と 1 行のテキストを囲むのに十分な大きさです。

内側の div に十分なコンテンツを追加すると、テキストは最終的に、緑色の背景を持つ内側の div の外側に流れます。これはブラウザがデフォルトでどのように動作するかであり、何があってもテキストを表示しようとします。

ただし、親要素に関する限り、390px + テキストの 1 行の高さに基づいて適切な高さを持ちます。テキストが固定高さの子要素からはみ出す場合、ブラウザーはブロック要素の高さを再計算しません。

内側の div にさらにテキストを追加し続けると、親要素のテキストをオーバーフローし始め、最終的には親コンテナーをオーバーフローoverflow: autoし、親要素に設定したため、垂直スクロール バーが表示されます。

一方、内側の div の高さを固定していなかった場合、期待される動作が得られます。内側の div は展開されてそのすべてのコンテンツが含まれ、親 div は展開されて内側の div と 1 行の両方を囲みます。文章。

例

次のフィドルhttp://jsfiddle.net/audetwebdesign/s3bnJ/を試して水平幅を調整すると、内側の div からのテキストが内側の div から親の div に流れ、最終的には、スクロールバーが表示されます。

于 2013-04-10T19:22:00.910 に答える
-1

overflow:none; で div を設定します。

更新中:

div のコンテンツがどのように表示されているかによって、overflow:hidden; を試すことができます。たとえば、スクロール バーが表示されてもコンテンツを表示するためにそれを使用する必要がない場合、'hidden' 引数が問題を解決します。

于 2013-04-10T15:34:45.250 に答える