1

我已经看很久了，我不知道这里发生了什么。谁能给我一个提示，为什么会这样？Firefox、Chrome、IE 都有相同的结果。

在此示例中，容器的宽度设置为1000px，内部 div 溢出容器：http: //jsfiddle.net/S65Hv/

在这个例子中我只将容器的宽度更改为300px，结果是内部项目的高度在容器内，没有溢出：http: //jsfiddle.net/5EwTG/

代码：

<style>
    .container {
        position: absolute; 
        top: 10px; 
        left: 10px; 
        width: 1000px; 
        height: 300px; 
        border: 1px solid grey;
    }

    .item {
        width: 48%;
        height: 48%;
        float: left;
        position: relative;
        margin: 1%;
    }

    .innerItem {
        border: 1px solid red;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }        
</style>    

<div class="container">
    <div class="item">
        <div class="innerItem">
        </div>        
    </div>        
    <div class="item">
        <div class="innerItem">
        </div>           
    </div>
    <div class="item">
        <div class="innerItem">
        </div>           
    </div>
    <div class="item">
        <div class="innerItem">
        </div>           
    </div>    
</div>

内部 div 的高度以百分比表示，总和为 100%，包括边距。

据我所知，300px 高度的 100% 始终相同，并且应该与宽度无关。

这种行为是设计使然吗？如果是这样，为什么？

4

5 回答 5

2

这就是百分比利润率应该如何运作的方式。百分比边距基于宽度的百分比。

http://www.w3.org/TR/CSS2/box.html

百分比是根据生成框的包含块的宽度计算的。请注意，“margin-top”和“margin-bottom”也是如此。

于 2013-02-05T21:29:34.513 回答
2

当您声明它时，它会根据父元素的宽度margin: 1%设置所有 4 个边距。因此，在这种情况下，宽度会影响您的身高。

于 2013-02-05T21:30:25.120 回答
0

绝对定位元素不再与其父元素处于相同的布局上下文中。他们不知道他们的父项在哪里或有多大。

因此，您不能使用百分比单位并期望它们的大小与父项相关。

于 2013-02-05T21:27:00.370 回答
0

1% 的边距似乎是根据宽度设置的。您可以使用 js 计算边距，然后设置它。

于 2013-02-05T21:33:27.167 回答
0

您的边距正在影响内箱的溢出。有很多方法可以解决这个问题，但您可以调整边距并固定内部div容器的高度和宽度。这是一个固定的例子：

http://jsfiddle.net/S65Hv/21/

正如@Aaron 所说，您可以使用 JS 来帮助解决这个问题。

于 2013-02-05T21:34:44.393 回答