3

フッター/ナビゲーションを画面の右下隅に固定しようとしているので、下にスクロールすると常に表示され、ブラウザーの右下を引いて大きくすると、画面の右下隅に固定されたままになります。 。また、ブラウザを小さくすると拡大縮小してほしいです。私はこれを左上隅で行う方法を考えましたが、右ではありません。

私が試してみました

 position:fixed;
 bottom:0;
 right:0:

ただし、これは機能していないようです。ページの端と画像の間に不思議なスペースが残っています（http://i.imgur.com/FZoaLd0.jpg）（divに負のマージンを設定しても、このスペースは消去されません）私も必要ありません最終的にはイメージマップにしたいので、これを背景画像として貼り付けます。

これが混乱している場合は申し訳ありません！私はまだこれで初心者です。

    <div id="footer">
<img src= "images/swirlfooter.png" width="75%" height="75%">
</div>

スペースの原因は幅と高さですか？もしそうなら、私はそれをどのように修正しますか？必要な正確なサイズで画像を作成するだけですか？

4

5 に答える 5

7

まず、スクロール中に動かしたくない場合は、固定位置が必要です。

#footer {
    position:fixed;
    right:0;
    bottom:0;
    margin:0;
    padding:0;
    width:75%;
}
#footer img {width:100%;}

そしてマージンをクリアするには：

html, body {
   margin:0;
   padding:0;
}

注意してくださいposition:fixed、残念ながら、iOS（iPhone、iPad ...）のサファリでは動作しません

ここでデモを見ることができます。

編集

別の解決策は、次の例のように、imgをフッターの背景に配置することです。

#footer {
    position:fixed;
    right:0;
    bottom:0;
    margin:0;
    width:75%;
    height:75%;
    background:url(http://i.imgur.com/FZoaLd0.jpg) no-repeat bottom right;
    background-size:100%;
}
于 2013-03-18T17:24:28.123 に答える
3

絶対位置はスクロールで移動します。必要なのはpositon:fixed;

#footer {
    position:fixed;
    bottom:0;
    right:0:
}
于 2013-03-18T17:16:33.273 に答える
0

必要position: fixed;です。

また、本文とHTMLの余白をクリアしてみることもできます。

html {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
}

位置が設定されている親コンテナを使用していませposition: relative;んか？

于 2013-03-18T17:16:18.697 に答える
0

使用する

position:fixed;

の代わりにabsolute。

修正すると、常にウィンドウの右下に表示されます。
スクロールすると絶対的に変化します。

于 2013-03-18T17:17:10.993 に答える
0

HTML：

<div class="class-name">
   <img src="images/image-name.png">
</div>

CSS：

div.class-name {
    position: fixed;
    margin-top: -50px;
    top: 100%;
    left: 100%;
    margin-left: -120px;
    z-index: 11000;
}
div.class-name img{
    width: 100px;
}

margin-top画像の高さに応じて変更してください。

于 2016-12-06T02:45:31.453 に答える