2

我有两个 div 标签parent和child. child标签的位置固定，宽度为 100%。父级有 10px 的填充，如此jsfiddle代码所示。问题是，当我为子标签提供 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; 
}
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

将absolutediv 放置在另一个 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;
}

演示

于 2013-02-28T07:31:39.107 回答
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 回答
0

嘿，您可以使用 width is 100vw 并设置 margin-left:-10px ；在孩子身上。

干杯

于 2015-08-23T12:07:16.370 回答