최소 높이를 갖는 3 개의 스택 divs

Question

나는이 문제에 대해 생각하면서 머리를 긁적 혔다. 3 개의 div가 있습니다. 상단 및 하단 div는 최소 높이를 가지고 중간 div는 알 수없는 높이 (내용에 따라 확장 됨)가 있지만 페이지의 가운데에 위치해야합니다. 위쪽 및 아래쪽 div는 나머지 위쪽 및 아래쪽 공간을 채워야합니다.

http://oi43.tinypic.com/5lb3v5.jpg

나는 순수 HTML/CSS의 솔루션을하고 싶습니다. HTML 구조를 리팩토링하는 것은 가능하다 ..

감사

현재 HTML 구조 :

<div id="page"> 
    <div id="top">top div</div 
    <div id="middle">middle div</div> 
    <div id="bottom">bottom div</div> 
</div> 

그리고 CSS :

#page { 
    min-height: 100%; 
    height: 100%; 
    width: 100%; 
} 
#top, #bottom { 
    min-height: 17.5%; 
    height: auto !important; /* Set height to content height but keep it minimum 17.5% */ 
    height: 17.5%; /* Some IE don't understand min-height... */ 
    width: 100%; 
} 
#middle { 
    height: auto; 
    width: 100%; 
} 

Answer 1

당신은 다음과 같이 그것을 위해 jQuery를 사용할 수 있습니다 http://jsfiddle.net/rebeen/8YVzb/

HTML :

<div id="page"> 
    <div id="top">top div</div> 
    <div id="middle">middle div</div> 
    <div id="bottom">bottom div</div> 
</div> 

CSS는 :

#page { 
min-height: 300px; 
} 
#top, #bottom { 
    background: #000; 
    min-height: 17.5%; 
    width: 100%; 
} 
#middle { 
background:#555; 
    height: auto; 
    width: 100%; 
} 

JQuery와 :

$(function(){ 
    var pageHeight = $('#page').height(); 
    var topHeight = $('#top').height(); 
    var bottomHeight = $('#bottom').height(); 
    var middleHeight = $('#middle').height(); 
    if(middleHeight > (pageHeight-(topHeight+bottomHeight))) 
     $('#middle').css(height, 'auto'); 
    else 
     $('#top, #bottom').height((pageHeight-middleHeight)/2); 
}) 

Answer 2

내가 보는 가장 쉬운 방법은 테이블 디스플레이이지만, 당신이 (http://caniuse.com/#feat=css-table)를 지원해야 느릅 나무 브라우저에 따라 달라집니다.

http://jsfiddle.net/NukYE/

body, 
html { 
    height: 100%; 
} 
#page { 
    display: table; 
    min-height: 100%; 
    height: 100%; 
    width: 100%; 
} 
#top, #bottom { 
    display: table-row; 
    min-height: 17.5%; 
    height: auto !important; /* Set height to content height but keep it minimum 17.5% */ 
    height: 17.5%; /* Some IE don't understand min-height... */ 
    width: 100%; 
} 
#middle { 
    display: table-row; 
    height: auto; 
    width: 100%; 
}