CSS将一个元素定位在页面底部

Question

CSS将一个元素定位在页面底部

csspositioning

16

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

我唯一能够实现这一点的方法是使用 jQuery :(

- saomi

6个回答

2

您可以使用position: absolute来实现。示例：http://jsfiddle.net/R2V4U/

- welldan97

1

Position: 'absolute'是答案，但您可能想要将您的body或一个包含图片的div容器设置为position: 'relative'，以给图片一个参照点。

我尝试在文档底部使用这个方法来实现页脚，只有当我将body设置为position: 'relative'时才起作用。话虽如此，将body设置成这样可能不是最佳实践，因此最好使用一个相对定位的容器来装载整个页面。

- Krzem

0

我曾经遇到过同样的问题，但在网上找到的所有解决方案都要么太复杂，要么在某些情况下无法正常工作。我发现最简单的方法是这样的：

<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，并向div添加“class”或“ID”。

- Frédéric Auffray

-1

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

可以完成任务。

- ChristopheCVB

1

当我说页面底部时，我指的是文档底部，而不是浏览器窗口底部。加载页面时，图像不可见，但当我向下滚动到底部时可以看到它。你理解了吗？ - saomi

是的，我明白了...那你为什么不把你想要放在最后的元素，放在HTML结构的最后位置呢？ - ChristopheCVB

1

我不知道OP想做什么，但就我个人而言，目前我正在尝试将Blogger中一个明显必需的小部件移动到更好的位置，以便为客户服务。有时候你无法做正确的事情，这很遗憾。 - Soron

-1

我知道这个问题很老了，但是如果您不想让元素在改变窗口大小时显示在其他元素之上，那么我认为我的答案是正确的。因此，为了实现这一点，我创建了包含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>

- Esgath

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wander Nauta · Accepted Answer

尝试使用position: fixed。它可以将任何块级元素（如div、图片）固定在页面上的某个位置。该元素将保持在那里当你滚动页面时（除了平板/移动设备）。例如：

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

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