Question

我有一个菜单栏，我想放在屏幕的底部。我将定位设置为绝对值，将底部距离设置为“0”，但由于某种原因，无论我如何定位它，它都不会从屏幕中间移动。谁能抓住我做错了什么？

<div class=bmenu>
  <img src="bottommenu.gif" width=100% height="39" alt="" />
</div>

<style>
.bmenu
{
    position:absolute;
    z-index: 2;
    bottom:0;
    left:0;
    width:100%;
}
</style>

编辑：一些评论者表示，这段代码将它置于底层。这是否意味着问题来自此代码片段与其余代码交互的方式？有谁知道是什么原因引起的？

Answer 1

如果您使用任何浏览器的网络检查员，您会发现<html>和<body>元素的高度不是100％，而是auto，这意味着他们只会像他们内容扩展到的那样高。

您需要做的是设置这些元素的高度，如下所示：

html, body {
    height: 100%;
}

这会强制它们填充视口的整个高度。唯一需要注意的是，这需要您在其他元素上定义margin-top，margin-bottom，padding-top和padding-bottom，因为边距和填充将添加在之上高度，这不是您在height中定义width（或%时）通常不想要的。

Answer 2

尝试使用此代码：

.bmenu
{
    position:fixed;
    z-index: 2;
    bottom:0;
    left:0;
    width:100%;

}

图像不会位于html的底部

2 个答案: