Question

我有两个div标签parent和child。 child代码的位置固定为宽度100％。如此jsfiddle代码所示，Parent的填充为10px。问题是，当我给子标签赋予100％的宽度时，它的右侧移出父div标签。我知道那是因为它有填充。解决此问题的一种方法是为子标签提供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; 
}

Answer 1

jsfiddle.net/q4ffs/3/ DEMO

如果您对使用jQuery有一点兴趣，那么这应该可以解决您的问题。 CSS仍有一些限制，但这一小部分javascript可能对你有用。

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

由于

Answer 2

将absolute div放在另一个div中，该div放在父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;
}

DEMO

Answer 3

使位置相对查看输出

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

}

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

Answer 4

如果填充是问题，您也可以调整其填充

为孩子提供课程填充

并附加代码

.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+ */

    }

它不会让孩子用填充物最大化她的宽度

Answer 5

嘿，你可以使用宽度是100vw并设置margin-left：-10px;关于孩子。

干杯

如何修复子div标签的宽度

5 个答案: