0

ヘッダーの背景画像を 2 つのヘッダーの下に移動するためにposition:relativeandを使用していますが、これはうまく機能します。次に、ラッパーとフッターも相対的に設定し、両方を 120 ピクセル上に移動して正しく並べる必要がありました。問題は、ページの下部のフッターの下に 120 ピクセルの余分なスペースがあることです。そのスペースを簡単に削除する方法はありますか? それとも、この結果を得るために CSS とプロパティを使用する別の方法があるのでしょうか? ここに私のサイトがあります：top:-120px<div/><div/><div/>position

http://ledvideowall.net

4

4 に答える 4

1

存在する必要はないと言うつもり#headerbgでしたが、ページのサイズが小さくなったときにヘッダーの高さと幅の比率を維持するために画像を使用していることがわかります。
このようなことをする必要があるときbackground-image、この場合は " " をまったく配置せず、ラッパーposition:relativeと#headertop&を作成します#menubar position:absolute。これにより、トップとメニューがフローから取り除かれbackground image、機能します。

.site-header {
  position:relative;
  ...
}
#headertop {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 z-index:1;
...
}
#menubar {
 position:absolute;
 top:80px;
 left:0;
 width:100%;
 z-index:1;
 ...
}
#headerbg {
 display:block;
 height:auto;
 width:100%;
 /*
 position: relative;
 top: -120px;
 z-index: 0;
 */
}
#headerbg img {
 display:block;
 width:100%;
 height:auto;
}
于 2013-04-22T00:42:46.817 に答える
1

修正は次のとおりです。

.wrapper {
    top: 0;
}
.site-header {
    margin-bottom: -120px;
}    
footer[role="contentinfo"]{
    top:0;
}
于 2013-04-22T00:20:54.160 に答える