[英]How can I position my div at the bottom of its container?
给定以下 HTML：
<div id="container"> <!-- Other elements here --> <div id="copyright"> Copyright Foo web designs </div> </div>
我希望#copyright坚持#container的底部。 我可以在不使用绝对定位的情况下实现这一点吗？
可能不会。
分配position:relative到#container ，然后是position:absolute; bottom:0; position:absolute; bottom:0; 到#copyright 。
#container { position: relative; } #copyright { position: absolute; bottom: 0; }
<div id="container"> <!-- Other elements here --> <div id="copyright"> Copyright Foo web designs </div> </div>
实际上，@User 接受的答案仅在窗口高且内容短的情况下才有效。 但是如果内容高而窗口短，它会将版权信息放在页面内容上，然后向下滚动查看内容会给你留下一个浮动的版权声明。 这使得该解决方案对于大多数页面（实际上就像这个页面）都无用。
最常见的方法是演示的“CSS 粘性页脚”方法，或者稍微更苗条的变体。 这种方法效果很好——如果你有一个固定高度的页脚。
如果你需要一个可变高度的页脚，如果内容太短，它会出现在窗口底部，如果窗口太短，它会出现在内容的底部，你会怎么做？
吞下你的骄傲，使用一张桌子。
例如：
* { 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 应该让我们的生活更轻松——总的来说，它确实如此——但事实是，即使经过这么多年，它仍然是一个破碎的、违反直觉的混乱。 它不能解决所有问题。 它不完整。
表格并不酷，但至少就目前而言，它们有时是解决设计问题的最佳方式。
在支持的浏览器中，您可以使用以下内容：
.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>
上面的解决方案可能更灵活，但是，这里有一个替代解决方案：
.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>
作为旁注，您可能需要添加供应商前缀以获得额外支持。
是的，您可以在不使用absolute定位且不使用table的情况下执行此操作（使用标记等）。
演示
经过测试，它可以在 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;
}
它有效地完成了float:bottom的工作，甚至解决了@Rick Reilly 的回答中指出的问题！
看看那个工作小提琴
因为正常的流程是“从上到下”，我们不能简单地要求#copyright div 坚持到他的父母的底部，而没有某种绝对定位，但是如果我们希望#copyright div 坚持到顶部他的父母，这将非常简单——因为这是正常的流动方式。
因此，我们将利用这一点作为我们的优势。 我们将更改 HTML 中div的顺序，现在#copyright div 位于顶部，内容紧随其后。 我们还让内容 div 一直拉伸（使用伪元素和清除技术）
现在只需在视图中反转该顺序即可。 这可以通过 CSS 转换轻松完成。
我们将容器旋转 180 度，现在：向上是向下。 （然后我们将内容反转为看起来正常）
如果我们想在内容区域中有一个滚动条，我们需要应用更多的 CSS 魔法。 可以在这里显示[在该示例中，内容位于标题下方-但其想法相同]
* { 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"> <!-- Other elements here --> <div>Element 1</div> <div>Element 2</div> </div> </div>
由于 CSS Grid 的使用越来越多，我想建议align-self用于网格容器内的元素。
align-self可以包含任何值： end ， self-end ， flex-end用于以下示例。
#parent { display: grid; } #child1 { align-self: end; } /* Extra Styling for Snippet */ #parent { height: 150px; background: #5548B0; color: #fff; padding: 10px; font-family: sans-serif; } #child1 { height: 50px; width: 50px; background: #6A67CE; text-align: center; vertical-align: middle; line-height: 50px; }
<div id="parent"> <!-- Other elements here --> <div id="child1"> 1 </div> </div>
为#copyright上方的元素创建另一个容器div 。 在版权上方添加一个新的div ： <div style="clear:both;"></div>它将强制页脚位于其他所有内容之下，就像使用相对定位（ bottom:0px; ）的情况一样。
尝试这个;
<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>
虽然这里提供的答案似乎都不适用于我的特定情况或工作，但我遇到了这篇文章，它提供了这个简洁的解决方案：
#container {
display: table;
}
#copyright {
display: table-footer-group;
}
我发现它对于将响应式设计应用于移动显示非常有用，而无需重新排序网站的所有 html 代码，将body本身设置为表格。
请注意，只有第一个table-footer-group或table-header-group将呈现为：如果有多个，其他将呈现为table-row-group 。
如果您使用inline-block元素的文本对齐功能知道#container的height ，您确实可以在不使用position:absolute的情况下将框align bottom 。
在这里你可以看到它的作用。
这是代码：
#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;
}
只需将元素子元素设置为位置：相对，然后将其移动到顶部：100%（即父元素的 100% 高度）并通过变换坚持到父元素的底部：translateY(-100%)（即 -100% 的高度孩子）。
好处
但仍然只是解决方法:(
.copyright{
position: relative;
top: 100%;
transform: translateY(-100%);
}
不要忘记旧浏览器的前缀。
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; }
<div class="overlay"> <div class="container"> <div class="height"> content </div> </div> <div class="footer"> footer </div> </div>
如果您不知道子块的高度：
#parent { background:green; width:200px; height:200px; display:table-cell; vertical-align:bottom; } .child { background:red; vertical-align:bottom; }
<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>
如果你想让它“粘”在底部，不管容器的高度如何，那么绝对定位就是要走的路。 当然，如果版权元素是容器中的最后一个元素，它总是在底部。
你能扩展你的问题吗？ 准确解释你想要做什么（以及为什么你不想使用绝对定位）？
另外，如果有使用position:absolute;的规定。 或position:relative; , 你总是可以尝试padding父div或放置一个margin-top:x; . 在大多数情况下不是一个很好的方法，但在某些情况下它可能会派上用场。
#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>
这是一种方法，旨在使具有已知高度和宽度（至少近似）的元素浮动到右侧并停留在底部，同时作为其他元素的内联元素。 它集中在右下角，因为您可以通过其他方法轻松地将其放置在任何其他角落。
我需要制作一个导航栏，它在右下角有实际的链接和随机的兄弟元素，同时确保栏本身可以正确拉伸，而不会破坏布局。 我使用了一个“阴影”元素来占据导航栏链接的空间，并将其添加到容器子节点的末尾。
<!DOCTYPE html>
<div id="container">
<!-- Other elements here -->
<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>
也许这对某人有帮助：您始终可以将 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>
不想在底部使用“位置：绝对”作为粘性页脚。 然后你可以这样做：
html, body { height: 100%; margin: 0; } .wrapper { min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */ margin-bottom: -50px; } .footer{ background: #000; text-align: center; color: #fff; } .footer, .push { height: 50px; } <html> <body> <!--HTML Code--> <div class="wrapper"> <div class="content">content</div> <div class="push"></div> </div> <footer class="footer">test</footer> </body> </html>
此特定场景的解决方案：
将 inner 放在 parent 的底部。 父级的高度由其“最高”兄弟级的高度设置
设置：
<div class="container"><div class="container">在另一个<div class="supercontainer">中彼此相邻<div class="container">有 3 个相互重叠的内部 div： <div class="title"> 、 <div class="content"> 、 <div class="footer">期望的结果：
<div class="container">都具有相同的高度。 高度没有以 px 为单位定义，它将是其中“最高”的高度。<div class="title">应该在<div class="container">的顶部<div class="content">应该放在<div class="title">下面<div class="footer">应该放在<div class="container">的底部，不与前面的内容重叠这是当前状态： https ://codepen.io/xavier-atero/pen/ExvWQww
.supercontainer { border: solid 1px black; display: flex; } .container, .other-container { position: relative; border: solid 1px red; width: 200px; margin: 10px; } .title { margin: 10px; border: solid 1px blue; } .content { margin: 10px; border: solid 1px cyan; } .footer { margin: 10px; background: lime; }
<body> <div class="supercontainer"> <div class="container"> <div class="title"> This part represents the title and it is placed on top </div> <div class="content"> This one represents the body and it is placed below the title </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> <div class="other-container"> <div class="title"> This part represents the title and it is placed on top. </div> <div class="content"> This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged. </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> </div> </body>
__________ 使用 FLEXBOX 的解决方案 __________
这是结果： https ://codepen.io/xavier-atero/pen/MWvpBMz
.supercontainer { border: solid 1px black; display: flex; } .container, .other-container { position: relative; border: solid 1px red; width: 200px; margin: 10px; display: flex; flex-direction: column; } .title { margin: 10px; border: solid 1px blue; } .content { margin: 10px; border: solid 1px cyan; } .footer { margin: 10px; background: lime; margin-top: auto; border: solid 1px fuchsia; }
<body> <div class="supercontainer"> <div class="container"> <div class="title"> This part represents the title and it is placed on top </div> <div class="content"> This one represents the body and it is placed below the title </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> <div class="other-container"> <div class="title"> This part represents the title and it is placed on top. </div> <div class="content"> This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged. </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> </div> </body>
__________ 使用 TABLE-ROW 的解决方案 __________
这是结果： https ://codepen.io/xavier-atero/pen/rNzyKJm
.supercontainer { border: solid 1px black; display: flex; } .container, .other-container { position: relative; border: solid 1px red; width: 200px; margin: 10px; border-collapse:collapse; display : table; } .title { margin: 10px; border: solid 1px blue; } .content { margin: 10px; border: solid 1px cyan; } .footer { margin: 10px; background: lime; border: solid 1px fuchsia; display: table-row; vertical-align: bottom; height: 1px; }
<body> <div class="supercontainer"> <div class="container"> <div class="title"> This part represents the title and it is placed on top </div> <div class="content"> This one represents the body and it is placed below the title </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> <div class="other-container"> <div class="title"> This part represents the title and it is placed on top. </div> <div class="content"> This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged. </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> </div> </body>
您可以通过将可用空间分配给顶部的内容来使用网格：
#container { display: grid; grid-template-rows: 1fr auto; height: 10rem; /* or 100% or anything */ } <div id="container"> This is random content. <div id="copyright"> Copyright Foo web designs </div> </div>
CSS 中没有所谓的float:bottom 。 最好的方法是在这种情况下使用定位：
position:absolute;
bottom:0;
仅仅因为根本没有提到这一点，通常在像你这样的情况下效果很好：
将 copyright-div 放在 container-div之后
您只需要以与其他容器类似的方式（相同的整体宽度、居中等）来格式化版权 div，一切都很好。
CSS：
#container, #copyright {
width: 1000px;
margin:0 auto;
}
HTML：
<div id="container">
<!-- Other elements here -->
</div>
<div id="copyright">
Copyright Foo web designs
</div>
唯一可能不理想的情况是您的 container-div 声明为height:100% ，并且用户需要向下滚动才能查看版权。 但即使你仍然可以解决（例如margin-top:-20px - 当你的版权元素的高度是 20px 时）。
旁白：我知道 OP 要求的解决方案是“......粘在'容器' div 的底部......” ，而不是它下面的东西，但是来吧，人们在这里寻找好的解决方案，而这个是一个！
对于容器中只有一个子元素的容器，您可以使用table-cell和vertical-align方法，该方法可以可靠地将单个 div 定位在其父元素的底部。
请注意，使用table-footer-group作为提到的其他答案将破坏 parent 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>
这是您在 Skyblue 背景中的惊人解决方案：D
#container{ background-color: skyblue; height: 100px; position: relative; } h4{ text-align: center; } #container #copyright{ position: absolute; bottom: 5px; text-align: center; }
<div id="container"> <h4>Foo Web Design </h4> <!-- Other elements here --> <div id="copyright"> © Copyright Foo web designs </div> </div>
样式的div， position:absolute;bottom:5px;width:100%; 正在工作，但它需要更多的滚动情况。
window.onscroll = function() {
var v = document.getElementById("copyright");
v.style.position = "fixed";
v.style.bottom = "5px";
}
根据： w3schools.com
具有位置的元素：绝对； 相对于最近的定位祖先定位（而不是相对于视口定位，如固定）。
因此，您需要将父元素定位为相对或绝对等，并将所需元素定位为绝对，然后将底部设置为 0。
如何将单词的边框底部定位到其容器的底部？
[英]How can I position the border bottom of a word to the bottom of its container?
如何在Firefox中将元素放置在其容器的底部？
[英]How can I position an element at the bottom of its container in Firefox?
我该如何做 <div> 如果它在容器的底部向上生长 <div> ？
[英]How can I make a <div> to grow upwards if its at the bottom of container <div>?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.