전체 화면 CSS 레이아웃

Question

전체 화면 CSS 레이아웃을 만들고 싶습니다.

<div id="divLeft">LEFT is ok</div> 
<div id="divRight"> 
    <div id="divTop">TOP is ok</div> 
    <div id="divCenter">CENTER should have liquid height</div> 
    <div id="divBottom">BOTTOM should be always bottom</div> 
</div> 

CSS

html{ 
    height:100% 
} 
body{ 
    height:100% 
} 
#divLeft{ 
    float:left; 
    width:70px; 
    height:100%; 
    background:#6c9; 
} 
#divRight{ 
    margin-left:70px; 
    height:100%; 
    background:#999; 
    color:#fff; 
} 
#divTop{ 
    background:red; 
    text-align:right; 
} 
#divCenter{ 
     background:blue; 
     text-align:center; 
} 
#divBottom{ 
    background:green; 
    text-align:center; 
} 

Here is jsfiddle

그래서, 문제는 #divCenter (이 있어야 액체 높이) 및 #divBottom (화면 하단에 항상 있어야한다)으로한다.

Answer 1

supported below IE 9이 아니지만 모바일 지원 기능이 상당히 좋지 않지만 calc() 기능을 사용하면 쉽게이를 수행 할 수 있습니다. 당신이해야 할 일은 #divCenter의 형제들로부터 높이의 100 %에서 20px + 20px 높이를 뺀 것입니다. 꼬리말에 바닥 글을 표시하려면 포함하는 블록을 상대적으로 배치 한 다음 바닥 글을 절대적으로 배치하고 하단에 배치해야합니다 (bottom: 0;).

http://jsfiddle.net/gpwD4/6/

Answer 2

#divTop 및 #divBottom가 고정 된 것을 높이를 가정하면,이 작업을 수행 할 수 있습니다 :이 같은

#divRight{ 
    position: relative; 
} 

#divCenter{ 
    position: absolute; 
    top: (height of #divTop) 
    bottom: (height of #divBottom) 
    left:0; 
    right:0; 

} 
#divBottom{ 
    position: absolute; 
    left:0; 
    bottom:0; 
    right:0; 
} 

LIVE DEMO