4

たくさんのコンテンツを含む div があり、幅を親要素の 100% に設定しようとしています。この div もパディングを使用しているため、幅を auto に設定する必要があると考えました。しかし、何らかの理由で、常に親の幅を超えて拡張されます。スクロールするように設定されたオーバーフローさえあります。

私が欲しいのは、divにスクロールバー（水平のみ）を持たせ、その幅を親の幅に合わせることです。

これを修正する方法を知っている人はいますか？

4

3 に答える 3

3

親の幅 100%、パディングあり:

あなたが言及したパディングが100％幅の要素に適用されていることを考えると、問題はブラウザが使用するボックスモデル内にあります. 100% の幅といくらかのパディングを適用すると、要素はwidth + padding完全な幅になるため、要素が大きくなりすぎます。これを解決するには、いくつかの方法があります。

  1. CSS3 は、 と呼ばれる新しいプロパティを導入box-sizingします。これを に設定するとborder-box、幅に追加して要素が「大きく」なるのではなく、要素の指定された幅内にパディングが追加されます。(古いブラウザではサポートされていないことに注意してください)。

  2. left: 0; right: 0;を使用する代わりに使用できると思いますwidth: 100%;。その場合、要素が広くなることなく、パディングを追加できます。

実際の2番目のオプション：

<!-- The markup -->
<div class="parent">
    <div class="child">Child</div>
</div>​

/* The CSS */
.parent {
    width: 200px;
    height: 200px;
    position: relative;
    background-color: #666;
}

.child {
    position: absolute;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: #888;
}
​

2 番目のオプションの実際の例を次に示します: http://jsfiddle.net/mGLRD/

水平スクロールバー:

水平スクロール バーを取得するには、overflow-xCSS プロパティを調べる必要があります。に設定するとscroll、スクロールするコンテンツがない場合に無効なスクロールバーが表示されるため、スクロールバーは常に表示されます。他のオプションはauto、必要に応じてスクロールバーが表示されるように設定することです (ブラウザによって異なる場合があります)。

于 2012-07-16T18:37:37.490 に答える
1

試す：

div#content {
    width:auto;
    padding:20px;
    overflow-x:auto;
}

私のデモを参照してください: http://jsfiddle.net/HRRsU/3/

于 2012-07-16T18:33:36.103 に答える