Question

我在这里有一个简单的标记：

<div class="fixh">

    <div class="outer">
        <div class="inner">
            inner
        </div>

    </div>

</div>

我想让内部块具有至少100％的外部块高度。如果内容大于100％，则应该溢出。但是最小高度：100％的内部挡不起作用！例： http://jsfiddle.net/mBBJM/5378/

Answer 1

min-height实际上并没有与百分比一起工作。解决这个问题的方法就是在这里使用height:100%：

＆＃13;

.fixh {
    width: 300px;
    height: 300px;
    background-color: green;
}

.outer {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-color: blue;
}

.inner {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-color: gray;
}

＆＃13;

<div class="fixh">
    <div class="outer">
        <div class="inner">
            inner
        </div>
    </div>
</div>

＆＃13;

分别使用height或width样式（或min-height和min-width时，您应始终指定max-height和max-width样式对于这个问题）。否则CSS不知道它需要改变，所以它不会。

Answer 2

我希望这就是你所要求的。

http://jsfiddle.net/w9Lghbuw/1/

.fixh {
    width: 300px;
    height: 300px;
    background-color: green;
}
.outer {
    width: 100%;
    min-height: 100%;
    background-color: blue;
    height: 100%;
}
.inner {
    color:#fff;
    width: 100%;
    height: 100%;
    line-height: 20px;
    word-break: break-all;
    overflow: auto;
}

如果容器的最小高度也是百分比，则CSS最小高度百分比不会起作用

2 个答案: