宽度为 100% 的绝对定位元素溢出相对宽度父级答案

【问题标题】：Absolutely positioned element with width 100% overflowing relative width parent宽度为 100% 的绝对定位元素溢出相对宽度父级
【发布时间】：2016-03-14 18:57:12
【问题描述】：

我希望我的绝对定位元素：

始终位于容器元素的底部。
跨越整个容器元素。
不跨越容器元素的填充。

容器 div 具有基于 % 的宽度。

你可以在这里看到我的问题： http://jsfiddle.net/vTuTv/2/

.container {
  min-height: 200px; 
  width: 50%;
  background-color: #3e3e00;
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.line { 
  background-color: #003e3e;
  position: absolute;
  bottom: 0;
  height: 22px;
  width: 100%;   
}

<div class="container">
  <div class="line"></div>
</div>

显然，如果元素不是绝对定位的，那么我可以在父元素上使用box-sizing。

【问题讨论】：

标签： fluid-layout css

【解决方案1】：

不要为此使用width: 100%。下面的代码完成了这项工作。

jsFiddle Demo

.line { 
    position: absolute;
    bottom: 0;
    height: 22px;
    left: 15px;
    right: 15px;    
}

【讨论】：

我希望它不与容器的填充重叠。我可以将整个东西包装在另一个 div 中，但如果有更好的方法，我想避免这种情况......
请注意：.container 必须是 position: relative;，就像问题中一样。完美运行。

【解决方案2】：

您需要将其向右拉到左侧，目前还没有发生。为此添加：

left: 0;

http://jsfiddle.net/WhK5W/1/

【讨论】：