고정 열과 유동 열 모두를 사용한 CSS 레이아웃

Question

CSS 레이아웃에서 액체 및 고정 요소를 혼합하는 것은 문제가되는 것처럼 보입니다. 여러 가지 설정을 시도했지만 올바르게 설정할 수는 없습니다.

주 콘텐츠가 각면 (위, 왼쪽, 오른쪽, 아래)의 콘텐츠로 둘러싸인 템플릿을 만들려고합니다.

<div id="container"> 
<div id="header">k</div> 
<div id="left-column"></div> 
    <div id="center-column"><h1>Main Page</h1> Liquid layout trial</div> 
<div id="right-column"></div> 
<div id="footer"></div> 
</div>​ 

톱 바 (머리글)의 높이를 고정해야합니다. 왼쪽 열의 높이/너비가 고정되어 있어야합니다. 중앙 열은 뷰포트 및 내용에 따라 높이/너비가 같아야합니다. 오른쪽 열의 높이/너비는 고정되어 있어야합니다. 바닥 글

여기 내 CSS의 높이를 고정해야 : 내가 할 수있는 4 개의 "면"의 전체 영역을 기대하는 것처럼 전체 너비/높이가

#header{ 
    background-color: blue; 
    height 50px; 
    color: white; 
    clear:both; 
} 

#left-column{ 
    background-color: green; 
    width:100px; 
    height:400px; 
    float: left; 
} 

#center-column{ 
    background-color: yellow; 
    float:left; 
} 

#right-column{ 
    background-color: red; 
    float:right; 
    height: 400px; 
    width: 100px; 
} 

#footer{ 
    clear: both; 
    height: 50px; 
    background-color: pink; 
} 

센터 열이 그것을 사용하지 않는 것입니다 노랑.

또 다른 문제는 뷰포트를 제한 함께, 오른쪽 열에는 가운데 열 아래로 떨어질

내 헤더를 표시 할 콘텐츠를 필요로하는 이유도 이해가 안 돼요. 캐릭터 "K"를 삭제하면 보이지 않습니다. 당신은 IE7에 대한 관심하지 않는 경우 http://jsfiddle.net/jasonBr81/vZDND/2/

Answer 1

, 당신이 갈 수 있습니다

나는 여기이 예제의 바이올린을 가지고있다. 중간 열에 고정 폭이없는 것은 물론 또 다른 이점이 있습니다.

모든 열의 높이는 항상 같습니다.

는

• 당신은 쉽게 전체 높이에 걸쳐 하나 개의 컨테이너에 수직 테두리를 추가 할 수
• 당신은 부동 문제는

CSS

<style> 
    #header { 
     height:    50px; 
     background-color: blue; 
     color:    white; 
    } 

    #left-column{ 
     display:   table-cell;  
     height:    400px; 
     background-color: green; 
    } 

    .left-column-inner { 
     width:    100px; 
    } 

    #center-column { 
     display:   table-cell; 
     width:    100%; 
     background-color: yellow; 
    } 

    #right-column { 
     display:   table-cell; 
     background-color: red; 
    } 

    .right-column-inner { 
     width:    100px; 
    } 

    #footer{ 
     clear: both; 
     height: 50px; 
     background-color: pink; 
    } 
</style> 

HTML

을 설명 없을거야

<div id="container"> 
    <div id="header">HEADER</div> 

    <div id="left-column"> 
     <div class="left-column-inner">LEFT</div> 
    </div> 
    <div id="center-column"> 
      <h1>Main Page</h1> 
      <p> 
       Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial 
       Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial 
      <p> 
    </div> 
    <div id="right-column"> 
     <div class="right-column-inner">RIGHT</div> 
    </div> 

    <div id="footer">FOOTER</div> 
</div>​