Html CSS 3 列布局固定 100% 高度如果内容不等于高度则在 safari 中不起作用(在 chrome 中工作)

Question

我有固定高度 100% 的 3 列布局。

<div id="content">
    <div id="left">
        <div class="top-block-60">
            top-block-60-px
        </div>

        <div class="content-left-full-height">
            --
        </div>

    </div>

    <div id="center">
        <div class="top-block-60">
            top-block-60-px
        </div>
        <div class="content-center-full-height">
            <ul>
                <li>List item</li>
                <li>List item</li>
            </ul>
        </div>
    </div>

    <div id="right">
        <div class="top-block-60">
            top-block-60-px
        </div>
        <div class="content-right-full-height">
            --
        </div>
    </div>
</div>


html, body, #left, #right, #center { height: 95%; margin: 0; padding: 0; color: #6b6b6b; overflow: hidden;}
#content {height: 95%; width: 98%; min-width: 1000px; max-width: 5400px; font-size: 0; margin: 0 auto;}
#left, #center, #right { display:inline-block; font-size: 12pt; height: 100%;}
#left { width: 20%;}
#center { width: 40%;}
#right { width: 40%;}

.clear {clear: both;}

.top-block-60 { width: 100%; height: 60px; border-bottom: 1px #ccc solid;}

.content-left-full-height { display:inline-block; width: 100%; overflow: auto;}
.content-center-full-height { display:inline-block; width: 100%; overflow: auto;}
.content-right-full-height { display:inline-block; width: 100%; overflow: auto;}

每一列都应该有顶部的固定内容和可滚动的内容。Google Chrome 中的解决方案工作: http://jsfiddle.net/ALLxW/ (见 chrome 或下面的图片)

但不是在 Safari 中。

如果列的内容相等，则有效:

如果我将任何内容放在其中一列，它就会被破坏: 无论哪一栏包含内容:

根本找不到Safari 的解决方案。

CSS。 html，js在这里:http://jsfiddle.net/ALLxW/ full screen (在 Safari 和 Chrome 中不同)

Answer 1

添加一个 float :从左到左，从右到中。所以 css 看起来像这样:

#left, #center, #right { display:inline-block; font-size: 12pt; height: 100%; float: left}