-1

我正在研究一个带有页眉（固定高度）、内容和页脚（固定高度）的简单布局。到目前为止，只要文本内容没有填满整个屏幕，我就可以让它正常工作。

请参阅代码示例。

<!-- 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>
4

1 回答 1

0

将中间列的位置更改为“底部：-9999px”，以便它们延伸到可视区域下方，然后将底部列定位为“固定”，以便内容可以在下方滑动

#col2, #col5 {
    position: absolute;  
    top: 100px;
    bottom: -9999px; 
    background-color: yellow;
}
#col3, #col6 {  
    position: fixed;  
    bottom: 0px;
    height:50px;
    background-color: green;
}
于 2013-03-20T14:58:53.767 回答