如果内容不等于高度（在chrome中工作），Html CSS 3列布局固定100％高度不适用于safari

Question

我有3列布局，固定高度100％。

<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 here：http://jsfiddle.net/ALLxW/ full screen（Safari和Chrome不同）

Answer 1

添加一个浮动：从左到左，向右和中心。所以css看起来像这样：

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