css 在页面底部定位一个元素答案

【问题标题】：css position an element at the bottom of the pagecss 在页面底部定位一个元素
【发布时间】：2012-02-05 08:26:58
【问题描述】：

我需要一些关于在页面底部或容器 div 底部放置一个或多个图像的最佳方式的提示。如果可能，仅使用 css。

我能做到这一点的唯一方法是使用 jquery :(

【问题讨论】：

【解决方案1】：

试试position: fixed。这会将任何块元素（div、图像）定位在相对于页面的固定位置。当您滚动时，该元素将保留在那里（平板电脑/移动设备除外）。例如：

div#bottom {
  position: fixed;
  bottom: 0;

  /* And if you want the div to be full-width: */
  left: 0;
  right: 0;
}

【讨论】：

当我说页面底部时，我指的是文档的底部，而不是窗口浏览器的底部。当我加载页面时，图像不可见，但是当我向下滚动到最后时，我可以看到它。你明白了吗？？
那么您可能正在寻找position: absolute。
对我来说效果很好，但 # 前面的 div 是多余的。我在 Blazor 中使用它在我的 NavMenu 底部放置一个徽标。

【解决方案2】：

Position: 'absolute' 是答案，但是您可能希望为 position: 'relative' 设置您的 body 或一个 div 容器，以便为图像提供参考点。

我尝试将其用作文档底部的页脚，并且仅当我将正文设置为 position: 'relative' 时它才有效。话虽如此，这样设置 body 可能不是最佳做法，因此最好在 body 中为整个页面使用具有相对位置的容器。

【讨论】：

【解决方案3】：

您可以使用position: absolute。演示：http://jsfiddle.net/R2V4U/

【讨论】：

【解决方案4】：

遇到了同样的问题，在网上找到的所有东西要么太复杂，要么在某些情况下不起作用。我找到的最简单的方法是这样的：

<html>
<div style="width:100%;height:100%;">
<div style="width:100%;min-height:95%;">Content</div>
<div style="height:5%;position: relative;bottom:0px;">Footer</div>
</div>
</html>

显然您可以提取样式表中的 css 并将“class”或“ID”添加到 div。

【讨论】：

【解决方案5】：

#mydivid{
     position : fixed;
     bottom : 0;
}

会做的。

【讨论】：

当我说页面底部时，我指的是文档的底部，而不是窗口浏览器的底部。当我加载页面时，图像不可见，但是当我向下滚动到最后时，我可以看到它。你明白了吗？？
是的，我明白了……那你为什么不把你想成为最后一个的元素放在 html 结构中的 lats 位置呢？
我不知道 OP 想要做什么，但就我个人而言，我目前正试图将 Blogger 中的一个明显强制性的小部件移动到一个更好的位置，以供客户使用。遗憾的是，在某些情况下您无法做正确的事。

【解决方案6】：

我知道这个问题已经很老了，但如果您不希望元素在更改窗口大小时显示在其他元素之上，我认为我的答案是正确的。因此，为了实现这一点，我创建了 div 容器，在其中存储了要在页面底部显示的元素，然后我使用 flexbox 来证明它的合理性。 https://jsfiddle.net/08xrab3w/9/

html {
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
#bottom-of-page-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}
#bottom-of-page {
  border-top: 1px solid #e4e4e4;
  width: 100%;
  background-color: green;
   height: 60px;
}

HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div>
    
  </div>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
  </ul>
  <div id="bottom-of-page-container">
    <div id="bottom-of-page"></div>
  </div>
</body>
</html>

【讨论】：