0

デザインをいじっていますが、うまくいかないようです。

http://jsfiddle.net/eTG4K/33/

<div id="wrapper">
    <div id="header"></div>
    <div id="fader"></div>
    <div id="body">
        <div id="viewer"></div>

    </div>
</div>
<div id="footer" > a</div>

</p> 

body,html
{
 height: 100%;
background-color: #2c2c28;   
}
#header
{
 background-color:red;
    height:45px;
}
#footer
{
    height:45px;
    background-color:blue;

}
#wrapper
{
 height:100%; 
margin-bottom:-45px;   

}
#viewer
{
height:100%;
background-color:yellow;   overflow-y: hidden;  
}
#body
{
    background-color:pink;
 height:100%;   
    overflow-y: hidden;
}
#fader
{
 height:20px;   
}​

黄色の id=body は、ページよりもさらに下に伸びています。フッターで止めてほしい。

4

4 に答える 4

1

スティッキーフッター効果を探していると思います。ラッパーにフッターと同じ高さの要素を配置して、それを押し下げて下部に保持する必要があります。また、ラッパーの css でいくつかの高さのプロパティを設定する必要があります。

<div id="wrapper">
    <div id="header"></div>
    <div id="fader"></div>
    <div id="body">
        <div id="viewer"></div>

    </div>
    <div class="push"></div>
</div>
<div id="footer" > a</div>

.push{
    height:45px;
}
#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom:-45px;      
}

http://jsfiddle.net/eTG4K/41/

編集：

あなたの問題は、#body100% の高さを与えようとしているということです。それ以来、その先祖はすべて 100% の高さ#bodyを持っているため、ウィンドウの高さになりますが、#wrapperスペースを占有する他の子があり、オーバーフローが発生します。マージンを使用してこの問題を解決できますが、再設計を検討します。

#wrapper
{
   margin-bottom:-45px;
}
#body
{
   margin-top:-65px;   
}
#viewer
{
    margin-top:65px;   
}
/* add z-index to #fader and #header so they wont be covered by #body and #viewer */
#fader
{
    position:relative;
    z-index:999;
}​
#header
{
    position:relative;
    z-index:999;
}

http://jsfiddle.net/eTG4K/68/

于 2012-10-19T05:51:40.413 に答える
0

次のように、フッターをラッパー内に配置します。 

<body>    
    <div id="wrapper">
        <div id="header"></div>
        <div id="fader"></div>
        <div id="body">
            <div id="viewer"></div>         
        </div>
        <div id="footer" ></div>
    </div> 
</body>
</html>​

これにより、ラッパーと本文が 100% の高さに設定されているため、本文がフッターを超えて拡張されるのを防ぎます。

于 2012-10-19T05:44:10.660 に答える
0

jsfiddle

<div id="wrapper">
    <div id="header"></div>
    <div id="fader"></div>
    <div id="body">
        <div id="viewer"></div>

    </div>
    <div id="footer" > a</div>
</div>

</p>

于 2012-10-19T05:46:49.273 に答える
0

..........ライブデモ.................................

fixed positionこんにちは、このように使用できます

#footer {
    background-color: blue;
    bottom: 0;
    height: 45px;
    left: 0;
    position: fixed;
    right: 0;
}

ライブデモ

于 2012-10-19T05:53:25.903 に答える