Question

我需要一些关于在页面底部或容器div中放置一个或多个图像的最佳方法的提示。如果可能的话只有css。

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

我尝试将其用作文档底部的页脚，仅当我将身体设置为position: 'relative'时，此方法才有效。话虽如此，设置这样的主体可能不是最佳实践，因此最好在整个页面内使用相对位置的容器。

Answer 4

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

可以胜任。

Answer 5

我知道这个问题已经很老了，但是如果您不希望在更改窗口大小时让元素显示在其他元素上，那么我的答案是正确的。为此，我创建了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>

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

5 个答案: