CSS 하나의 열이있는 동일한 높이 열 Containg Bottom Div

Question

테이블을 사용하지 않아도 되겠지만 (테이블이 작동하지는 않지만) 필자는 사용자가 하나의 div에 두 개의 div가있는 세 개의 div가 떠 다니기를 원합니다. div의 하단에 표시해야합니다.

어쩌면 나는 모든 과정을 재고하고 그것을 간단하게 유지하도록 설득해야 할 것입니다.

<style> 
    #outer-div { 
     overflow: hidden; 
     background-color: grey; 
    } 
    #column-one { 
     padding-bottom: 500em; 
     margin-bottom: -500em; 
     background-color: red; 
     width: 200px; 
     float: left; 
    } 
    #column-two { 
     padding-bottom: 500em; 
     margin-bottom: -500em; 
     background-color: green; 
     width: 200px; 
     float: left; 
    } 
    #column-three { 
     padding-bottom: 500em; 
     margin-bottom: -500em; 
     background-color: blue; 
     width: 200px; 
     float: left; 
    } 
    #column-one-bottom { 
     position: absolute; 
     bottom: 0; 
     background-color: pink; 
    } 
</style> 
<div id="outer-div"> 
    <div id="column-one"> 
     <div id="column-one-top"> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
     </div> 
     <div id="column-one-bottom"> 
      Column One Bottom Data 
     </div> 
    </div> 
    <div id="column-two"> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
    </div> 
    <div id="column-three"> 
     Column Three Data<br/> 
     Column Three Data<br/> 
     Column Three Data<br/> 
     Column Three Data<br/> 
    </div> 
    <br style="clear: both;"/> 
</div> 

이 http://jsfiddle.net/Zre8D/2/

희망 누군가가 도움이 될 수 있습니다 참조 :

어쨌든 여기 내 코드입니다.

문제는 # column-one-bottom입니다. 나는 div의 중간이 아니라 그것의 부모가되는 것이 필요하다.

Answer 1

#column-one-bottom { 
    position: absolute; 

보십시오 :이 같은

#column-one-bottom { 
    position: relative; 

Answer 2

뭔가? http://jsfiddle.net/Zre8D/

HTML :

<div id="outer-div"> 
    <div id="column-one"> 
     <div id="column-one-top"> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
      Column One Top Data<br/> 
     </div> 
     <div id="column-one-bottom"> 
      Column One Bottom Data 
     </div> 
    </div> 
    <div id="column-two"> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
     Column Two Data<br/> 
    </div> 
    <div id="column-three"> 
     Column Three Data<br/> 
     Column Three Data<br/> 
     Column Three Data<br/> 
     Column Three Data<br/> 
    </div> 
    <br style="clear: both;"/> 
</div>​ 

CSS :

#outer-div { 
     overflow: hidden; 
     background-color: grey; 
    } 
    #column-one { 
     background-color: red; 
     width: 200px; 
     float: left; 
     position:relative; 
     padding-bottom:200px; 
    } 
    #column-two { 
     background-color: green; 
     width: 200px; 
     float: left; 
    } 
    #column-three { 
     background-color: blue; 
     width: 200px; 
     float: left; 
    } 
    #column-one-bottom { 
     position: absolute; 
     bottom: 0; 
     background-color: pink; 
     overflow:hidden; 
    }​ 

Answer 3

변경 다음과 같은 스타일.

<style> 
    #outer-div 
    { 
     height: 100%; 
     background-color: grey; 
    } 
    #column-one 
    { 
     background-color: red; 
     position: absolute; 
     left: 0; 
     width: 200px; 
     height: 100% 
    } 
    #column-two 
    { 
     background-color: green; 
     width: 200px; 
     position: absolute; 
     left: 200; 
     height: 100% 
    } 
    #column-three { 
     background-color: blue; 
     width: 200px; 
     position: absolute; 
     left: 400; 
     height: 100% 
    } 
    #column-one-bottom { 
     position: absolute; 
     bottom: 0; 
     background-color: pink; 
    } 
</style> 

Answer 4

솔루션을 찾을 수있었습니다. 솔루션 (http://jsfiddle.net/Zre8D/12/)에 가까움 :

#outer-div { 
    overflow: hidden; 
    background-color: grey; 
    position: relative; 
} 
#column-one { 
    padding-bottom: 500em; 
    margin-bottom: -500em; 
    background-color: red; 
    width: 200px; 
    float: left; 
} 
#column-two { 
    padding-bottom: 500em; 
    margin-bottom: -500em; 
    background-color: green; 
    width: 200px; 
    float: left; 
} 
#column-three { 
    padding-bottom: 500em; 
    margin-bottom: -500em; 
    background-color: blue; 
    width: 200px; 
    float: left; 
} 
#column-one-bottom { 
    bottom: 0; 
    position: absolute; 
    background-color: pink; 
}