0

次のレイアウト構造に取り組んでいます。

<div id="wrapper">
    <div id="header"></div>
    <div id="pageContainer"></div>
    <div id="footer"></div>
</div>

次の CSS を使用して、フッターをページの下部に設定します。

#wrapper {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#pageContainer {
   padding:10px;
   padding-bottom:60px;
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;
   background:#6cf;
}

問題のスキーマ

「pageContainer div」のコンテンツが小さい場合、div にスクロール バーを表示したくありませんが、「pageContainer div」の下部にフッターを追加します (フッターは常にページの下部にあるわけではありません)。ビューポート)

「pageContainer div」のコンテンツが長い場合、フッターをビューポート (下部) に表示したままにし、「pageContainer div」にスクロール バーを表示する必要があります。

どうすればいいですか？何か案は？ありがとう！

PS: JS を使用しないソリューションが必要です。

4

2 に答える 2

0

次のようなことができると思います：

#header {
   background:#ff0;
   padding:10px;
   height: 15%;
}
#pageContainer {
   padding:10px;
   max-height: 70%;
   overflow: auto;
}
#footer {
   bottom:0;
   width:100%;
   height:15%;
   background:#6cf;
}​

身長をパーセンテージで指定する必要があることに注意してください。また、パディングも問題になる可能性があります。

于 2012-10-24T22:45:13.323 に答える
0

私が正しく読んだ場合、ビューポートで利用可能な不動産に対する要素のサイズに応じて、配置が相対的から固定に切り替わる動作を説明しています。

確かに、これは JavaScript なしでは実現できません。

しかし、フッターが常にビューポートの下部にあるソリューションはかなり一般的で、JavaScript を使用しなくても簡単に実行できます。その方法がわからない場合は、次のようにします。

#header, #pageContainer, #footer{
    position:fixed;
    left:0px;
    right:0px;
}
#header{
    top:0px;
    height:100px;
    background:#ff0;
}
#pageContainer {
    top:100px;
    bottom:60px;
    overflow:auto;
}
#footer {
    bottom:0px;
    width:100%;
    height:60px;
    background:#6cf;
}
于 2012-10-25T06:14:16.873 に答える