0

非常に単純な Web ページ、ヘッダー、いくつかのコンテンツ、およびフッターを作成しました。

CSSは次のとおりです。

.Footer{
  background-color: rgb(238,238,238);
  bottom: 0px;
  width: 100%;
  max-height: 398px;
  display: inline-block;
}
.Footer img{
  height: 100%;
  bottom: 0px;
  display: inline-block;
}
.Footer #About{
  width: 20%;
  display: inline-block;
}

および HTML :

<div class="Footer">
    <img id="ceinture" src="medias/pictures/ceinture.jpg">

    <div id="About">
      Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. 
      ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, 
      et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut 
      satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
    </div>
</div>

問題：

フッターはブラウザーの下部にはありませんが、次のように 3 または 4 ピクセルの余白があります。

問題のスクリーンショット

画像（左側の灰色の部分）を削除すると、下のマージンが削除されます。それ以外の方法では削除できません...

ここで参照できますが、プレビュー ウィンドウはより大きくする必要があります768px(CSS3 メディア クエリのため)。

4

3 に答える 3

0

Here is working example, just copy and paste.

html

<div class="Footer">

<img id="ceinture" src="medias/pictures/ceinture.jpg">
    <div id="About">
      Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. 
      ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, 
      et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut 
      satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
    </div>
</div>

Css

       *{margin: 0;padding: 0;}
.Footer{
  background-color: rgb(238,238,238);
  position: absolute;
  bottom: 0px;
  width: 100%;
  max-height: 398px;
  display: inline-block;
}
.Footer img{
  height: 100%;
  bottom: 0px;
  display: inline-block;
}
.Footer #About{
  width: 20%;
  display: inline-block;
}
于 2013-10-23T14:43:40.770 に答える
0

多分このように

    <div id="About">
    <img id="ceinture" src="medias/pictures/ceinture.jpg">
      Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. 
      ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, 
      et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut 
      satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
    </div>
</div>

とcss

   *{margin: 0;padding: 0;}
.Footer{
  background-color: rgb(238,238,238);

  bottom: 0px;
  width: 100%;
  min-height: 2000px;
  display: inline-block;
}
.Footer img{
  height: 100%;
  bottom: 0px;
  display: inline-block;
}
.Footer #About{
  width: 20%;
  display: inline-block;
  position: absolute;bottom: 0;
}

div#Aboutを常に一番下に置きたい場合は、absolute を fixed に変更します

于 2013-10-23T15:12:43.190 に答える
0

ちょっとしたアドバイス。サイズや物を変えて、お気に入りのレイアウトが見つかるはずです。親要素を相対的な位置にレイアウトしてから、このコンテナ内のほとんどの項目を絶対的な位置に表示することをお勧めします。この 2 つのポジションを組み合わせることで、Web 開発をさらに進めることができます。

<html>
<head>
</head>    
<body>
    <div style="width: 960px; background-color: blue; min-height: 500px; margin: 0 auto; position: relative;">


    </div>

    <div style="position: relative; margin: 0 auto; background-color: red; width: 960px; height: 200px">
    This is your footer, anything in your footer should be absolute positioned. 
    <div style="position: absolute; left:0; bottom:0;">
    I'm sitting on the left of the footer at the bottom. 
    </div>
    </div>

    </body>
    </html>
于 2013-10-23T14:36:42.180 に答える