2

次のコードがあります。

CSS

#page {
    width: 400px;
    height: 400px;
    border: 1px solid #F00;
}
#page #bar {
    width: 100%;
    padding-left: 10px;
    border: 1px solid #00F;
}

HTML

<div id="page">
    <div id="bar">1 2 3 4 5 6 7 8 9 0</div>
</div>

#page #bar赤いボックスの外側の余分な部分を削除するには、CSS に何を入れればよいですか?

これがjsFiddleです。

4

8 に答える 8

4

を削除するだけですwidth: 100%;

ブロック要素 (などdiv) は、デフォルトでコンテナーの幅を埋めます (パディングを処理します) 。

http://jsfiddle.net/Ege2Y/1/のデモ

これは副作用ではありません。これは、現在のボックスモデルに基づいた方法です。

（あなたの場合ではない）幅を指定する必要がある場合は、そのルールのプロパティを次のように変更できますbox-sizing

#page #bar {
    width:100%;
    padding-left: 10px;
    border: 1px solid #00F;

    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

http://jsfiddle.net/Ege2Y/4/のデモ

于 2013-10-07T10:32:27.703 に答える
3

box-sizing属性を指定する必要があります:

#page #bar {    
    width: 100%;
    padding-left: 10px;
    border: 1px solid #00F;

   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
}

これが意味することは100% width、境界線を含む要素全体に適用されるということです。そのため、ネストされた要素は、その境界線が親内に収まるようにサイズ変更されます。

デフォルトではcontent-box、100% widthがコンテンツに適用されます。コンテンツ領域は親と同じ幅になります。

于 2013-10-07T10:34:15.643 に答える
0

最良の答えが選ばれましたが、別のアプローチを共有したいと思います。

追加するだけoverflow: hiddenで#page、「副作用」も解決されます。

これがjsFiddleのデモです。

于 2013-10-07T11:05:03.817 に答える
0

このクラスを使用できます

#page #bar {
    width: 98%;
    padding-left: 2%;
    border: 1px solid #00F;
}

jsフィドル

于 2013-10-07T10:34:24.457 に答える
0

幅を減らす必要がありますsomething like 97%

デモ

于 2013-10-07T10:35:11.697 に答える
0

#page #bar で幅を 97% に変更します

于 2013-10-07T10:35:48.310 に答える
0 
#page #bar {
    padding-left: 10px;
    position: relative;
    right: 0;
    left: 0;
    border: 1px solid #00F;
}
于 2013-10-07T10:39:26.403 に答える