0

我创建了一个非常简单的网页、一个页眉、一些内容和一个页脚。

这是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

也许像这样

    <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

这是工作示例，只需复制和粘贴。

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

只是一些建议。你应该通过改变大小和东西来找到你喜欢的布局。最好将父元素布局在相对位置，然后以绝对定位显示此容器内的大多数项目。这两个职位的结合将使您在 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 回答