Html 100% 宽度、填充和绝对定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4908924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
100% width, padding and absolute positioning
提问by Dwarf Vader
I was trying to make a div fill a certain part of the screen, leaving 412px empty both to the left and to the right. Easy, eh?
我试图让一个 div 填充屏幕的某个部分，在左边和右边留下 412px 空。容易，嗯？
Now, when I add position:absolute & top:0, the fill disappears. The element inspector shows it's empty - the "paddings" stay, but the width:100% disappears. I've used this code (without the positioning):
现在，当我添加 position:absolute 和 top:0 时，填充消失了。元素检查器显示它是空的 - “填充”保留，但宽度：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>
So, how can I position it absolutely (I need it animated later), while preserving the padding? I'd love your help very much. Thanks in advance!
那么，如何在保留填充的同时绝对定位它（我稍后需要对其进行动画处理）？我非常喜欢你的帮助。提前致谢！
回答by thirtydot
<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>
回答by Sotiris
from the moment you need to use position:absolute;why not use the properties left& rightinstead of padding?
从你需要使用的那一刻起，position:absolute;为什么不使用属性left&right而不是填充？
html
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>
Example: http://jsbin.com/anega3
edit
编辑
an alternative if you need badly to use padding you can set left:0; right:0;and then use the paddings you already have.
如果您非常需要使用填充，您可以设置left:0; right:0;然后使用您已有的填充。
html
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>
Example: http://jsbin.com/anega3/2
