如何固定子div标签的宽度答案

【问题标题】：how to fix width of child div tag如何固定子div标签的宽度
【发布时间】：2015-08-23 20:07:16
【问题描述】：

我有两个 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; 
}

【问题讨论】：

填充不是您在帖子中建议的问题。在没有填充的情况下对其进行测试。个人认为固定定位很少是个好主意。
感谢指正。

标签： css

【解决方案1】：

jsfiddle.net/q4ffs/3/ DEMO

如果您对少量使用 jQuery 感到满意，那么这应该可以解决您的问题。 CSS 仍然有一些限制，但这一小行 javascript 可能会很好地为您服务。

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

谢谢

【讨论】：

【解决方案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

【讨论】：

我想保持位置：固定。我不想改变子标签的位置属性。
你在你的问题absolute中说，但是不管怎样，你不能根据另一个div有一个fixed div，fixed div总是会根据整个页面固定.
如果固定位置是根据整个页面固定的，那么为什么在我的 jsfiddle 中它位于父 div 标签内？因为我放置在父 div 标签内，并且它位于其父级的左上角。但这里的宽度是个大问题。
@x4ph4r 因为通常它会在布局中占据默认位置，检查这个小提琴，我给了父级一个100px，注意固定的div会根据页面拉伸100%的宽度，而不是父 div。 jsfiddle.net/BjqrT

【解决方案3】：

将位置设为相对查看输出

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

}

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

【讨论】：

【解决方案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+ */

    }

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

【讨论】：

【解决方案5】：

你可以使用 width is 100vw 并设置 margin-left:-10px ;在孩子身上。

干杯

【讨论】：