fluid-layout - Absolutely positioned element with width 100% overflowing relative width parent

Question

I would like my absolutely positioned element to:

1. be positioned always at the bottom of the container element.
2. span across the whole container element.
3. not span over the padding of the container element.

The container div has a % based width.

You can see my problem here: 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>

Obviously if the element wasn't absolutely positioned then I could just use box-sizing on the parent element.

Answer 1

不要width: 100%用于那个。以下代码完成了这项工作。

jsFiddle 演示

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

Answer 2

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

left: 0;

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