绝对定位元素，宽度100％溢出相对宽度父级

Question

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

1. 始终位于容器元素的底部。
2. 跨越整个容器元素。
3. 没有跨越容器元素的填充。

容器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。

Answer 1

请勿使用width: 100%。以下代码可以完成这项工作。

jsFiddle Demo

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

Answer 2

你需要将它向右拉到左边，这是目前没有发生的事情。为此，请添加：

left: 0;

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