Html CSS 3 열 레이아웃 고정 100 % 높이가 사파리에서 작동하지 않습니다. 높이가 같지 않으면 (크롬에서 작동)

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;} 

각 열에는 고정 된 고정 컨텐츠와 스크롤 가능한 컨텐츠가 있어야합니다. 구글 크롬에서 솔루션 작업 : http://jsfiddle.net/ALLxW/이 (크롬 또는 이미지를 넣고에서 볼 수)

아니라 사파리한다.

컬럼의 내용에 해당하는 경우

, 그것은 작동 :

내가 열 중 하나를 콘텐츠를 배치 할 경우, 파손되지 않은 : 을 아무리 내용이 포함 된 열 :

을 Safari에 대한 해결책을 전혀 찾을 수 없습니다.

css. html, js 여기에 : http://jsfiddle.net/ALLxW/ full screen (Safari 및 Chrome에서 다릅니다)

Answer 1

왼쪽에서 오른쪽, 가운데를 추가하십시오. 그래서 CSS는 다음과 같습니다.

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