Question

如果你这样做：

<div style="width: auto; background: red; color: white">test</div>

你会得到一个拉伸的div来填充整个屏幕宽度（100％）。这就是我需要发生的事情。

但是，我还需要设置起始位置。所以，我需要position: absolute。

当我添加position：absolute时，div的宽度只与其中的内容一样宽（类似于浮点数）。有没有办法解决？

我不能简单地指定width: 100%，因为这不会考虑边框大小等。

Answer 1

当我添加position：absolute时，div的宽度只有宽度   内容..（类似于浮点数）。有什么办法吗？   此？

我不能简单地指定宽度：100％，因为这不接受   帐户边框大小等。

您可以使用position:absolute; left:0; right:0; top:0。

像这样：http://jsfiddle.net/thirtydot/yQWGV/

Answer 2

您可以使用宽度：100％和css属性框大小调整，以使框模型像IE 5.5一样工作，即填充和边框计入宽度。

div.absolute {
    width: 100%;
    border: 5px solid #000;
    background-color: #F00;
    position: absolute; top: 100px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 50px;
}

这是一个小提琴：http://jsfiddle.net/dJtm2/

要小心，因为它是一个相对较新的CSS3属性，只能在较新的浏览器中使用，正如您从我的示例中看到的那样，需要可怕的适得其反的措施，即供应商前缀。

Answer 3

简单地这样写：

div.absolute {
    border: 5px solid #000;
    background-color: #F00;
    position: absolute;
    top: 100px;
    padding: 50px;
    left:0;
    right:0;
}

http://jsfiddle.net/dJtm2/1/

在此padding & border中不会增加元素的宽度。

宽度：100％，位置：绝对

3 个答案: