2

2 つの div タグparentとchild. childタグは幅 100% で位置が固定されています。このjsfiddleコードに示されているように、親には 10px のパディングがあります。問題は、子タグに 100% の幅を与えると、その右側が親 div タグの外に移動することです。私はそれがパディングを持っているためであることを知っています。これを解決する 1 つの方法は、子タグの幅を 90% にすることです。But is there a better way than this so that child tag appears exactly inside parent tag?

アップデート

位置をキープしたい：子タグの固定

.parent {
    height: 300px;
    padding: 10px;
    border: 1px solid red;
}

.child {
    position: fixed;
    height: 100px; width: 100%;
    border: 1px solid black; 
}
4

5 に答える 5

1

jsfiddle.net/q4ffs/3/ デモ

jQuery の使用に慣れている場合は、これで問題が解決するはずです。CSS にはまだいくつかの制限がありますが、この小さな JavaScript の行は役に立ちます。

  $(function (){
      $('.child').each(function (){
          $(this).css('width', $(this).parent('div').width());
      })
  });

ありがとう

于 2013-02-28T08:14:27.333 に答える
0

親 div 内に配置されている別のabsolutediv 内に div を配置します。

<div class="parent">
    <div class="newDiv">
    <div class="child">

        </div>
    </div>
</div>

他の div はposition:relative;.

.newDiv
{
    position:relative;
    height:100%;
}
.child {
    position: absolute;
    height: 100px; left:0; right:0;
    border: 1px solid black;
}

デモ

于 2013-02-28T07:31:39.107 に答える
0

width is 100vw を使用して、margin-left:-10px を設定できます。子供に。

乾杯

于 2015-08-23T12:07:16.370 に答える
0

相対的な位置に出力を表示させます

.parent {
    height: 300px;
    padding: 10px;   
    border: 1px solid red;

}

.child {
    position: relative;
    height: 100px; width: 100%;
    border: 1px solid black;
}
于 2013-02-28T07:33:56.217 に答える
0

パディングが問題である場合は、パディングを調整することもできます

クラスパディングを子に与える

コードを追加します

.padding /*for box padding ie padding inside the box*/
{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    }

子供がパディングで幅を最大化することはできません

于 2013-02-28T07:46:52.347 に答える