Question

如果两个块都是绝对定位的，并且内部块有填充，我怎样才能使块填充其容器的整个宽度。

我做了一个JSFiddle： http://jsfiddle.net/dmdBB/

这里有一个示例：

<style>
.containerOut {
    position: absolute;
    width: 400px;
    height: 400px;
    border: thin solid black;
}

.containerIn {
    position: absolute;
    outline: 1px solid red;
    width: auto;

    padding: 4px;
}
</style>
<div class="containerOut">
       <div class="containerIn">
          im not large enough
       </div>
</div>

在此示例中，.containerIn元素太薄。如果我将其宽度设置为100％，则会因为填充而溢出。

PS：我想要一个CSS解决方案，我知道放置一个100％宽度和0margin / padding / border的中间HTML容器可以解决这个问题。

Answer 1

您需要使用width: 100%。

，而不是使用left: 0; right: 0

要修复上一个示例，您可以使用word-wrap: break-word。

请参阅： http://jsfiddle.net/QjdD5/1/

.containerIn {
    width: auto !important; /*just to override your inline CSS */
    left: 0;
    right: 0;
    word-wrap: break-word
}

Answer 2

right:0px;
left:0px;
overflow:hidden;

表示内部元素，如果你不想在黑色边框上显示红色边框，你可以使用overflow：hidden for outer div

Answer 3

@biab;填充＆amp; border为元素添加宽度。也许你可以放入你的CSS：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

http://jsfiddle.net/sandeep/dmdBB/28/

Answer 4

取代...

width：auto;

...与

左：0; 右：0;

在Chrome上测试

使一个块填满其容器的整个宽度

4 个答案: