0

我有一个要放在屏幕底部的菜单栏。我已将定位设置为绝对，将底部的距离设置为“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>

编辑：一些评论者说这段代码把它放在了他们的底部。这是否意味着问题出在此代码片段与其余代码交互的方式上？有谁知道是什么原因造成的？

4

2 回答 2

1

如果您使用任何浏览器的网络检查器，您会看到<html>和<body>元素的高度不是 100%，而是auto，这意味着它们的高度仅与它们中的内容扩展它们的高度一样高。

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

html, body {
    height: 100%;
}

这将迫使它们填满视口的整个高度。唯一需要注意的是，这需要您在其他元素上定义margin-top、和margin-bottom，因为边距和填充将添加到 height 的顶部，这不是您在定义（或就此而言）时通常想要的。padding-toppadding-bottomheightwidth%

于 2012-11-01T20:33:41.170 回答
0

尝试使用此代码：

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

}
于 2012-09-11T13:48:12.593 回答