Question

我已经看了很长时间，我不知道这里发生了什么。任何人都可以给我一个暗示，为什么这样的作品呢？ 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％总是相同的，应该与宽度无关。

这种行为是否符合设计要求？如果是这样，为什么？

Answer 1

这是百分比利润应该起作用的方式。百分比边距基于宽度的百分比。

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

百分比是根据宽度计算的生成的包含块的块。请注意，这是真的＆＃39;边距＆＃39;和＆＃39; margin-bottom＆＃39;同样。

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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

为什么内部div高度取决于容器宽度？

5 个答案: