如何将div放在容器的底部？-Java 学习之路

639

给出以下HTML：

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

我希望 #copyright 坚持 #container 的底部 .

我可以不使用绝对定位来实现这一目标吗如果float属性支持'bottom'的值，那么似乎可以做到这一点，但不幸的是，它没有 .

21 回答

317
这是一个古老的问题，但这是一种独特的方法，可以在几种情况下提供帮助 .

纯CSS，无绝对定位，无需修复任何高度，跨浏览器（IE9）

看看Working Fiddle

因为正常的流量是'top-to-bottom'我们不能简单地要求 #copyright div坚持他的父母的底部而没有绝对的某种定位，但如果我们想让 #copyright div坚持他的父母的顶部，它将非常简单 - 因为这是正常的流动方式 .

所以我们将利用这个优势 . 我们将在HTML中更改 div 的顺序，现在 #copyright div位于顶部，内容立即跟随它 . 我们还使内容div一直延伸（使用伪元素和清除技术）

现在只是在视图中反转该顺序的问题 . 这可以通过CSS转换轻松完成 .

我们将容器旋转180度，现在：向上 - 向下 . （我们将内容反转回看起来正常）

如果我们想在内容区域中有一个scroolbar，我们需要应用更多的CSS魔法 . 可以显示Here [在该示例中，内容低于 Headers - 但它的想法相同]
```
* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
```
```
<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>
```
回复于 2024-05-01T23:28:11+08:00
-1

如果你想要它“坚持”到底部，无论容器的高度如何，那么绝对定位是要走的路 . 当然，如果版权元素是容器中的最后一个，那么无论如何它总是在底部 .

你能扩展你的问题吗？准确解释你想要做什么（以及为什么你不想使用绝对定位）？

回复于 2024-05-01T23:28:11+08:00

可能不是 .

将 position:relative 分配给 #container ，然后将 position:absolute; bottom:0; 分配给 #copyright .

#container {
    
}
#copyright {
    position: absolute;
    bottom: 0;
}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

回复于 2024-05-01T23:28:11+08:00

1

为 #copyright 上方的元素创建另一个容器 div . 在版权之上添加一个新的 div ： <div style="clear:both;"></div> 它会强制 footer 在其他所有内容之下，就像使用相对定位（ bottom:0px; ）的情况一样 .

回复于 2024-05-01T23:28:11+08:00
0
CSS中没有任何名为 float:bottom 的内容 . 最好的方法是在这种情况下使用定位：
```
position:absolute;
bottom:0;
```
回复于 2024-05-01T23:28:11+08:00

flexbox方法！

在supported browsers中，您可以使用以下内容：

Example Here

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

上面的解决方案可能更灵活，但是，这是一个替代解决方案：

Example Here

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

作为旁注，您可能需要添加供应商前缀以获得其他支持 .

回复于 2024-05-01T23:28:11+08:00

Link here .

HTML：

<div class="overlay">
    <div class="container">
        <div class="height">
          content
        </div>
    </div>

    <div class="footer">
        footer
    </div>
</div>

CSS：

html, body {
    width: 100%;
    height: 100%;
}

.overlay {
    min-height: 100%;
    position: relative;
}

.container {
    width: 900px;
    position: relative;
    padding-bottom: 50px;
}

.height {
    width: 900px;
    height: 50px;
}

.footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
}

回复于 2024-05-01T23:28:11+08:00

3

此外，如果有使用 position:absolute; 或 position:relative; 的规定，您可以随时尝试 padding parent div 或放置 margin-top:x; . 在大多数情况下，这不是一个非常好的方法，但在某些情况下它可能会派上用场 .

回复于 2024-05-01T23:28:11+08:00

Yes 你可以在没有 absolute 定位的情况下执行此操作，而无需使用 table （带有标记等等） .

DEMO
这个测试适用于IE> 7，chrome，FF＆是一个非常容易添加到现有布局的东西 .

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>

#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

即使考虑到@Rick Reilly的回答中指出的问题，它也能有效地完成 float:bottom 所做的事情！

回复于 2024-05-01T23:28:11+08:00

0
使用translateY和top属性

只需将元素子元素设置为position：relative，然后将其移动到顶部：100％（即父级的100％高度）并通过transform转换为父级的底部：translateY（-100％）（即高度的-100％）孩子） .

好处
- 你 do not 从页面流中获取元素
- 这是动态的
但仍然只是解决方法:(
```
.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}
```
不要忘记旧版浏览器的前缀 .
回复于 2024-05-01T23:28:11+08:00

如果您使用 inline-block 元素的 text alignment 功能知道 #container 的 height ，则确实可以 align bottom 的方框而不使用 bottom .

Here你可以看到它在行动 .

这是代码：

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

回复于 2024-05-01T23:28:11+08:00

如果您不知道子块的高度：

#parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;}
    .child{background:red;vertical-align:bottom;}

  </style>
</head>
<body>

<div id="parent">
  <div class="child">child
  </div> 
  </div>

http://jsbin.com/ULUXIFon/3/edit

如果你知道子块的高度添加子块然后添加padding-top / margin-top：

#parent{background:green;width:200px;height:130px;padding-top:70px;}
    .child{background:red;vertical-align:bottom;height:130px;}

<div id="parent">
  <div class="child">child
  </div> 
  </div>

回复于 2024-05-01T23:28:11+08:00

104

试试这个;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

回复于 2024-05-01T23:28:11+08:00

107
实际上，@ User接受的答案只有在窗口高且内容短的情况下才有效 . 但是，如果内容很高且窗口很短，它会将版权信息放在页面内容上，然后向下滚动以查看内容会给您留下浮动的版权声明 . 这使得这个解决方案对大多数页面都没用（实际上就像这个页面一样） .

最常见的方法是演示“CSS粘性页脚”方法，或略微变细 . 这种方法效果很好 - 如果你有一个固定的高度页脚 .

如果你需要一个变量如果内容太短，将出现在窗口底部的高度页脚，如果窗口太短，则会出现在内容的底部，您会怎么做？

吞下你的骄傲，并使用一张 table .

例如：
```
* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}
```
```
<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>
```
试试看 . 这适用于任何窗口大小，任何数量的内容，任何大小的页脚，在每个浏览器...甚至IE6 .

如果您想要使用表格进行布局，请花一点时间问自己为什么 . CSS应该让我们的生活变得更轻松 - 而且总的来说 - 但事实是，即使经过这么多年，它仍然是一个破碎的，反直觉的混乱 . 它无法解决所有问题 . 它不完整 .

表格并不酷，但至少目前，它们有时是解决设计问题的最佳方法 .
回复于 2024-05-01T23:28:11+08:00

#container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

回复于 2024-05-01T23:28:11+08:00

也许这有助于某人：你总是可以将div放在另一个div之外，然后使用负边距将其向上推：

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>

回复于 2024-05-01T23:28:11+08:00

2
仅仅因为没有提到这一点，通常在像你这样的情况下效果很好：

将copyright-div after 放置在container-div中

您只需要以与其他容器类似的方式格式化copyright-div（相同的总宽度，居中等），一切都很好 .

CSS：
```
#container, #copyright {
    width: 1000px;
    margin:0 auto;
}
```
HTML：
```
<div id="container">
    
</div>

<div id="copyright">
    Copyright Foo web designs
</div>
```
唯一一次这可能不太理想的是当你的容器div用 height:100% 声明时，用户需要向下滚动才能看到版权 . 但即使你仍然可以解决（例如 margin-top:-20px - 当你的版权元素的高度为20px时） .
- 没有绝对定位
- 没有表格布局
- 没有疯狂的CSS，在所有其他浏览器中看起来不同（至少IE，你知道）
- 简单明了的格式
旁白：我知道OP要求一个解决方案"... sticks to the bottom of the 'container' div ..."，而不是它下面的东西，但是来吧，人们在这里寻找好的解决方案，这就是一个！
回复于 2024-05-01T23:28:11+08:00
2
这是一种方法，旨在使具有已知高度和宽度（至少近似）的元素向右浮动并保持在底部，同时表现为其他元素的内联元素 . 它集中在右下角，因为您可以通过其他方法将其轻松放置在任何其他角落 .

我需要制作一个导航栏，它将在右下方有实际的链接，以及随机的兄弟元素，同时确保栏本身正确拉伸，而不会中断布局 . 我使用“shadow”元素占据导航栏的链接空间，并将其添加到容器子节点的末尾 .
```
<!DOCTYPE html>
<div id="container">
  
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>
```
回复于 2024-05-01T23:28:11+08:00
804
对于那些容器中只有一个子节点的人，可以使用 table-cell 和 vertical-align 方法，该方法可靠地将单个div放在其父节点的底部 .

请注意，使用 table-footer-group 作为提及的其他答案将打破父 table 的高度计算 .
```
#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}
```
```
<div id="container">
    <div id="item">Single bottom item</div>
</div>
```
回复于 2024-05-01T23:28:11+08:00

风格Div， position:absolute;bottom:5px;width:100%; 正在工作，但它需要更多的scrollup情况 .

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}

回复于 2024-05-01T23:28:11+08:00

4
虽然这里提供的答案似乎都没有适用或在我的特定情况下工作，但我遇到了this article，它提供了这个简洁的解决方案：
```
#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}
```
我发现将动态显示应用于响应式设计非常有用，无需重新排序网站的所有html代码，将 body 本身设置为表格 .

请注意，只有第一个 table-footer-group 或 table-header-group 将被渲染：如果有多个，其他的将呈现为 table-row-group .
回复于 2024-05-01T23:28:11+08:00

如何将div放在容器的底部？

21 回答

纯CSS，无绝对定位，无需修复任何高度，跨浏览器（IE9）

flexbox方法！

HTML：

CSS：

使用translateY和top属性

相关问题