Question

我想在页面的右下角放置一个图像（一种徽标）。

页面非常简单：

<html>（图中红色）
<body>
<header>
div#content

标题高度固定。 #content可以有不同的高度，并且会动态变化。

我使用的CSS：

html: {
  height: 100%;
}

body {
  min-height: 100%;
  position: relative;
  width: 100%;
  background-image:url('http://www.imagespourtoi.com/lesimages/mickey/image-mickey-3.jpg');
  background-repeat:no-repeat;
  background-size: 100px;
  background-position: right bottom;
  background-color: grey;
}

header {
  width: 50%;
  height: 180px;
}

#content {
  width: 50%;
}

HTML：

<html>
  <body>
    <header>
    </header>
    <div id="content">
    </div>
  </body>
</html>

左边是#content高度大于屏幕时发生的情况，右边是较小的情况。图中的云代表背景图像。您可以在左侧看到它显示在屏幕的右下角，而不是<body>（不是预期的行为）。

我做错了什么？

注意：我无法在JSFiddle上重现这种行为。

Answer 1

html标签也需要高度声明：

html { height: 100% }

背景图像未定位在右下角

1 个答案: