-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

中央の列の位置を「bottom：-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 に答える