100% 宽度、填充和绝对定位

Question

我试图让一个 div 填充屏幕的某个部分，在左侧和右侧都留出 412px 空白。简单吧？

现在，当我添加 position:absolute & top:0 时，填充消失了。元素检查器显示它是空的 - “填充”保持不变，但 width:100% 消失了。我用过这段代码（没有定位）：

<div style="height:73px; padding-left:413px; padding-right:413px;">
  <div style="width:100%; height:73px; background:url(top-fill-small.png);">
  </div>
</div>

那么，如何在保留填充的同时绝对定位它（稍后我需要动画）？我非常喜欢你的帮助。提前致谢！

Answer 1

从您需要使用position:absolute; 的那一刻起，为什么不使用属性left 和right 而不是填充？

html

<div style="height:73px;position:absolute;left:413px;right:413px;"><div style="width:100%; height:73px; background:url(top-fill-small.png);border:1px solid red">Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content </div></div>

示例：http://jsbin.com/anega3

编辑

如果您非常需要使用填充，则可以设置left:0; right:0;，然后使用您已有的填充。

html

<div style="height:73px;position:absolute;left:0;right:0px;padding-left:413px;padding-right:413px;"><div style="width:100%; height:73px; background:url(top-fill-small.png);border:1px solid red">Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content </div></div>

示例：http://jsbin.com/anega3/2

Answer 2

Perhaps this?

<div style="width:100%; position:absolute; top:0; left:0">
    <div style="height:73px; background:url(top-fill-small.png); margin-left:413px; margin-right:413px"></div>
</div>