使用DIV和CSS，填補了我國剩餘屏幕

Question

我工作的一個簡單的佈局和報頭（固定的高度），內容和頁腳（固定的高度）。到目前爲止，只要文本內容沒有填滿整個屏幕，我就可以很好地工作。

See code example。

<!-- CSS code --> 
<style> 
#col1, #col2, #col3, #col4, #col5, #col6 {width: 40% } 
#col4, #col5, #col6 {left: 50% } 
#col1, #col4 { 
    position: absolute; 
    top: 0px; 
    height: 100px; 
    background-color: red; 
} 
#col2, #col5 { 
    position: absolute; 
    top: 100px; 
    bottom: 50px; 
    background-color: yellow; 
} 
#col3, #col6 { 
    position: absolute; 
    bottom: 0px; 
    height:50px; 
    background-color: green; 
} 
</style> 


<!-- DIV code --> 

<div id="wrapper1"> 
<div id='col1'>Short text</div> 
<div id='col2'>Content<br>Lorem ipsum dolor sit amet, accusamus intellegat mea ad,  assum invidunt persequeris nam no. Iisque eloquentiam et sea, cum an mazim viris  democritum. Tation fabulas argumentum ei duo. Cu sea facer commodo eripuit, et munere omnium timeam his. At saepe complectitur cum, in pri illud lorem doctus. An cum tamquam scaevola, sit ut choro nominavi scripserit.</div> 
<div id='col3'>Footer</div> 
</div> 
<div id="wrapper2"> 
<div id='col4'>Long text</div> 
<div id='col5'>Content<br>Lorem ipsum dolor sit amet, accusamus intellegat mea ad, assum invidunt persequeris nam no. Iisque eloquentiam et sea, cum an mazim viris democritum. Tation fabulas argumentum ei duo. Cu sea facer commodo eripuit, et munere omnium timeam his. At saepe complectitur cum, in pri illud lorem doctus. An cum tamquam scaevola, sit ut choro nominavi scripserit. Te accusamus efficiendi vis, tollit ocurreret ea mei, vis aliquando necessitatibus id. Porro lucilius pri at. Esse invidunt at his, mea quas error te, eu option constituto vim. Wisi primis in his, ea vis errem quaestio ocurreret, ex vel dicunt ullamcorper. Ut possim corpora omittantur nam. Oblique sapientem qui ex. Mei ea solet vitae fabellas. Id diceret delicatissimi pri, sit ut viris equidem oportere. Id nec simul zril urbanitas, ne clita consul usu. Ei est ridens ancillae sensibus, pro etiam mandamus inciderint ne. Eam ceteros omnesque in, quo animal laboramus elaboraret at. Nam adhuc consul at, fugit animal oporteat ut vim, vix u iuvaret invidunt deserunt. Mei an adhuc deleniti imperdiet, cu admodum persecuti efficiantur has. Autem labore concludaturque ut vix, discere consulatu hendrerit id nec, voluptua reformidans vis ne. Vidit aliquam eam ad, vocibus invidunt facilisis ea qui, elit posse fastidii cu vel. Eos ei natum propriae epicurei. Eos virtute verterem voluptaria ne, te sint iudicabit mel, ei nec adipiscing liberavisse. Ei dolorem omittam pro, eum at minim impedit scribentur, fierent efficiendi no eam. Vim dicat vulputate no, ei nec vidisse posidonium, at cum menandri iracundia. Vim at epicurei pertinax, an has elit iisque. Has ei legere percipit scriptorem, nam ne recusabo salutandi scripserit, ne usu tota decore voluptatum.</div> 
<div id='col6'>Footer</div> 
</div> 

Answer 1

改變你的中柱定位到「底：-9999px」，使他們的可視區域 下方以及擴大再定位您的底部列爲「固定」，這樣的內容可以按下面滑行

#col2, #col5 { 
    position: absolute; 
    top: 100px; 
    bottom: -9999px; 
    background-color: yellow; 
} 
#col3, #col6 { 
    position: fixed; 
    bottom: 0px; 
    height:50px; 
    background-color: green; 
}