2

私のページには、メインコンテンツ、スティッキーフッター、および絶対に配置された右側のパネルがあります。私は通常、絶対位置を使用することはありませんが、この場合、ブラウザウィンドウが薄いときに、パネルをメインコンテンツに重ねる必要があります。現在、ウィンドウを垂直方向に縮小しすぎるまでは正しく見えます。コンテンツがページ分割の下に続くと、絶対位置にあるdivがフッターに一致しなくなります。絶対位置のdivが常にフッターを満たすのに十分な長さであり、ギャップがないことを確認するにはどうすればよいですか？

HTMLは次のとおりです。

<body>
    <div id="abs"></div>
    <div class="wrapper">
        <p>Website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
    </div>
</body>

そしてCSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}   
.footer {
    background-color:#333;
    position:relative;
    z-index:40;
}   
#abs {
    position:absolute;
    right:0;
    top:0;
    z-index: 20;
    background-color:#579ECF;
    width:100px;
    min-height: 100%;
}
p {
    width:700px;
}
4

1 に答える 1

0

あなたは絶対absにボディタグに配置します。理由から、私は本文には入りませんが、コンテンツではなく、ウィンドウの高さです。したがって、100％に設定すると、画面の高さだけになります。

代わりに、absdivをメインコンテンツdivに移動し、メインコンテンツをに設定しrelative、指定top: 0しbottom: 0て拡張absします。

http://jsfiddle.net/3jegZ/

.wrapper {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}  
#abs {
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    z-index: 20;
    background-color:#579ECF;
    width:100px;
}
于 2013-01-10T20:14:49.287 に答える