blocks|key|1018428|text|如果你想让它“粘”在底部，而不管容器的高度，那么绝对定位是可行的。当然，如果copyright元素是容器中的最后一个元素，那么它将始终位于底部。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1018429|你能详述你的问题吗？准确地解释你正在尝试做什么(以及为什么你不想使用绝对定位)？|1018430|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>If you want it to "stick" to the bottom, regardless of the height of container, then absolute positioning is the way to go. Of course, if the copyright element is the last in the container it'll always be at the bottom anyway.</p>

<p>Can you expand on your question? Explain exactly what you're trying to do (and why you don't want to use absolute positioning)?</p>


blocks|key|311705|text|可能不会。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|311706|将position:relative分配给#container，然后将position:absolute;+bottom:0;分配给#copyright。|offset|length|style|CODE|311707|311708|​|311709|#container+{
++++position:+relative;
}
#copyright+{
++++position:+absolute;
++++bottom:+0;
}|code-block|syntax|javascript|311710|<div+id="container">
++
++<div+id="copyright">
++++Copyright+Foo+web+designs
++</div>
</div>|311711|311712|entityMap^0|0|1|H|L|A|Z|S|1U|A|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]|$D|Y|E|Z|F|G]|$D|10|E|11|F|G]|$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|16|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|M|7|17|8|@]|9|@]|A|$N|O]]|$1|R|3|J|5|6|7|18|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|T|$]]

<p>Likely not.</p>

<p>Assign <code>position:relative</code> to <code>#container</code>, and then <code>position:absolute; bottom:0;</code> to <code>#copyright</code>.</p>

<hr>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;!-- Other elements here --&gt;
  &lt;div id="copyright"&gt;
    Copyright Foo web designs
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1018458|text|试试这个；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1018459|<div+id="container">
++<div+style="height:+100%25;+border:1px+solid+#ff0000;">
++
++</div>
</div>
<div+id="copyright"+style="position:relative;border:1px+solid+#00ff00;top:-25px">
+++Copyright+Foo+web+designs
</div>|code-block|syntax|javascript|1018460|​|1018461|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Try this;</p>

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

<p></p>


blocks|key|311787|text|实际上，@User接受的答案只有在窗口高而内容短的情况下才有效。但是如果内容很高而窗口很短，它会将版权信息放在页面内容上，然后向下滚动查看内容会给您留下一个浮动的版权通知。这使得这个解决方案对大多数页面(实际上就像这个页面)无用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|311788|最常见的方法是演示的"CSS粘性页脚“方法，或者稍微纤细一点的变种。这种方法效果很好--如果你有一个固定高度的页脚。|311789|如果你需要一个可变高度的页脚，如果内容太短，它会出现在窗口的底部，如果窗口太短，会出现在内容的底部，你该怎么办？|311790|放下你的傲慢，用一张桌子。|311791|例如：|311792|​|311793|*+{
++++padding:+0;
++++margin:+0;
}

html,+body+{
++++height:+100%25;
}

#container+{
++++height:+100%25;
++++border-collapse:+collapse;
}|code-block|syntax|javascript|311794|<!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>|311795|311796|试一试。这将适用于任何窗口大小，任何数量的内容，任何大小的页脚，在每个浏览器上...甚至是IE6。|311797|如果你对使用表格进行布局的想法感到畏缩，花点时间问问自己为什么。CSS本应让我们的生活更轻松--总的来说确实如此--但事实是，即使这么多年过去了，它仍然是一个破碎的、违反直觉的烂摊子。它不能解决所有问题。是不完整的。|311798|表格并不酷，但至少现在，它们有时是解决设计问题的最好方法。|311799|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|16|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|17|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|18|8|@]|9|@]|A|$O|P]]|$1|S|3|K|5|6|7|19|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1A|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1B|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|10|$]]

<p>Actually, the accepted answer by @User will only work if the window is tall and the content is short. But if the content is tall and the window is short, it will put the copyright info over the page content, and then scrolling down to see the content will leave you with a floating copyright notice. That makes this solution useless for most pages (like this page, actually).</p>

<p>The most common way of doing this is the "CSS sticky footer" approach demonstrated, or a slightly slimmer variation. This approach works great -- IF you have a fixed height footer.</p>

<p>If you need a variable height footer that will appear at the bottom of the window if the content is too short, and at the bottom of the content if the window is too short, what do you do?</p>

<p>Swallow your pride and use a table.</p>

<p>For example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
    &lt;table id="container"&gt;
        &lt;tr&gt;
            &lt;td valign="top"&gt;
                &lt;div id="main"&gt;Lorem ipsum, etc.&lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td valign="bottom"&gt;
                &lt;div id="footer"&gt;Copyright some evil company...&lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Try it out. This will work for any window size, for any amount of content, for any size footer, on every browser... even IE6.</p>

<p>If you're cringing at the thought of using a table for layout, take a second to ask yourself why. CSS was supposed to make our lives easier -- and it has, overall -- but the fact is that even after all these years, it's still a broken, counter-intuitive mess. It can't solve every problem. It's incomplete.</p>

<p>Tables aren't cool, but at least for now, they are sometimes the best way to solve a design problem.</p>


blocks|key|4376942|text|此外，如果有使用position:absolute;或position:relative;的规定，您可以随时尝试padding+parent+div或try+a+margin-top:x;。在大多数情况下，这不是一个很好的方法，但在某些情况下，它可能会派上用场。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|4376943|entityMap^0|8|I|R|I|1K|7|1Z|3|29|D|1S|6|0^^$0|@$1|2|3|4|5|6|7|I|8|@$9|J|A|K|B|C]|$9|L|A|M|B|C]|$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|D]]|E|@]|F|$]]|$1|G|3|-4|5|6|7|V|8|@]|E|@]|F|$]]]|H|$]]

<p>Also, if there's stipulations with using <code>position:absolute;</code> or <code>position:relative;</code>, you can always try <code>padding</code> <strong>parent</strong> <code>div</code> or putting a <code>margin-top:x;</code>. Not a very good method in most cases, but it may come in handy in some cases.</p>


blocks|key|4376977|text|在CSS中没有叫做float:bottom的东西。在这种情况下，最好的方法是使用定位：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4376978|position:absolute;
bottom:0;|code-block|syntax|javascript|4376979|entityMap^0|9|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>There is nothing called <code>float:bottom</code> in CSS. The best way is using positioning in such cases:</p>

<pre><code>position:absolute;
bottom:0;
</code></pre>


blocks|key|1018519|text|Div的风格，position:absolute;bottom:5px;width:100%25;是工作的，但它需要更多的滚动情况。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1018520|window.onscroll+=+function()+{
++++var+v+=+document.getElementById("copyright");
++++v.style.position+=+"fixed";
++++v.style.bottom+=+"5px";
}|code-block|syntax|javascript|1018521|entityMap^0|7|14|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Div of style, <code>position:absolute;bottom:5px;width:100%;</code> is working, 
But it required more scrollup situation.</p>

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


blocks|key|3529753|text|如果您知道使用height元素的#container的text+align+特性，那么您确实可以在不使用position:absolute的情况下将框对齐到bottom。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|3529754|Here你可以看到它的实际效果。|3529755|代码如下：|3529756|#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%25;+/*+Let+it+be+a+block+*/
++++background:green;
}|code-block|syntax|javascript|3529757|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/SqdPR/^0|7|6|G|A|W|5|1G|H|26|6|R|A|0|0|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|1A|8|@]|E|@$9|1B|A|1C|1|1D]]|F|$]]|$1|I|3|J|5|6|7|1E|8|@]|E|@]|F|$]]|$1|K|3|L|5|M|7|1F|8|@]|E|@]|F|$N|O]]|$1|P|3|-4|5|6|7|1G|8|@]|E|@]|F|$]]]|Q|$R|$5|S|T|U|F|$V|W]]]]

<p>You can indeed <code>align</code> the box to the <code>bottom</code> without using <code>position:absolute</code> if you know the <code>height</code> of the <code>#container</code> using the <strong>text alignment</strong> feature of <code>inline-block</code> elements.</p>

<p><a href="http://jsfiddle.net/SqdPR/" rel="nofollow">Here</a> you can see it in action.</p>

<p>This is the code:</p>

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

#container &gt; * {
    /* 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;
}
</code></pre>


blocks|key|311952|text|只是因为这一点根本没有被提及，通常在你这样的情况下工作得很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|311953|将-div放在-div之后|offset|length|style|BOLD|311954|您只需以与其他容器类似的方式格式化copyright-div+(相同的整体宽度、居中等)，一切都很好。|311955|CSS：|311956|#container,+#copyright+{
++++width:+1000px;
++++margin:0+auto;
}|code-block|syntax|javascript|311957|HTML：|311958|<div+id="container">
++++
</div>

<div+id="copyright">
++++Copyright+Foo+web+designs
</div>|311959|唯一不理想的情况是，您的container-div是用height:100%25声明的，用户需要向下滚动才能看到版权。但即使你仍然可以解决这个问题(例如margin-top:-20px+-当你的版权元素的高度是20px时)。|CODE|311960|311961|没有绝对定位|unordered-list-item|311962|没有表格布局|311963|没有疯狂的css，在每个浏览器中看起来都不一样(至少IE，你知道)|311964|简单明了的格式|311965|<代码>F215|311966|旁白:我知道OP要求的解决方案是“……粘在‘容器’div的底部……”，而不是它下面的东西，但是来吧，人们正在寻找好的解决方案，这就是其中之一！|311967|entityMap^0|0|1|6|0|0|0|0|0|0|R|B|22|G|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@$D|1F|E|1G|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1H|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1I|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1J|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1K|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1L|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1M|8|@$D|1N|E|1O|F|W]|$D|1P|E|1Q|F|W]]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|10|7|1S|8|@]|9|@]|A|$]]|$1|11|3|12|5|10|7|1T|8|@]|9|@]|A|$]]|$1|13|3|14|5|10|7|1U|8|@]|9|@]|A|$]]|$1|15|3|16|5|10|7|1V|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|1W|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|1X|8|@]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|1C|$]]

<p>Just because this hasn't been mentioned at all, what usually works well in situations like yours: </p>

<p>Placing the copyright-div <strong>after</strong> the container-div</p>

<p>You would only have to format the copyright-div in a similar way to the other container (same overall width, centering, etc.), and all is fine.</p>

<p><em>CSS:</em></p>

<pre><code>#container, #copyright {
    width: 1000px;
    margin:0 auto;
}
</code></pre>

<p><em>HTML:</em></p>

<pre><code>&lt;div id="container"&gt;
    &lt;!-- Other elements here --&gt;
&lt;/div&gt;

&lt;div id="copyright"&gt;
    Copyright Foo web designs
&lt;/div&gt;
</code></pre>

<p>The only time this might not be ideal is when your container-div is declared with <code>height:100%</code>, and the user would need to scroll down to see the copyright. But even still you could work around (e.g. <code>margin-top:-20px</code> - when the height of your copyright element is 20px).</p>

<ul>
<li>No absolute positioning</li>
<li>No table layout</li>
<li>No crazy css, that looks different in every other browser (well IE at least, you know)</li>
<li>Simple and clear formatting</li>
</ul>

<p>Aside: I know the OP asked for a solution that <em>"... sticks to the bottom of the 'container' div ..."</em>, and not something under it, but come on, people are looking for good solutions here, and this is one!</p>


blocks|key|4377132|text|CodePen+link+here。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4377133|​|4377134|html,+body+{
++++width:+100%25;
++++height:+100%25;
}

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

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

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

.footer+{
++++width:+900px;
++++height:+50px;
++++position:+absolute;
++++bottom:+0;
}|code-block|syntax|javascript|4377135|<div+class="overlay">
++++<div+class="container">
++++++++<div+class="height">
++++++++++++content
++++++++</div>
++++</div>

++++<div+class="footer">
++++++++footer
++++</div>
</div>|4377136|4377137|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/azizarslan/pen/vDCyg^0|0|H|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p><a href="http://codepen.io/azizarslan/pen/vDCyg" rel="nofollow noreferrer">CodePen link here</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="overlay"&gt;
    &lt;div class="container"&gt;
        &lt;div class="height"&gt;
            content
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="footer"&gt;
        footer
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1023779|text|为#copyright上面的元素创建另一个容器div。在版权之上添加一个新的div：<div+style="clear:both;"></div>它将强制页脚位于其他所有内容之下，就像使用相对定位(bottom:0px;)的情况一样。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|1023780|entityMap^0|1|A|N|3|12|3|16|V|2R|B|25|2|0^^$0|@$1|2|3|4|5|6|7|I|8|@$9|J|A|K|B|C]|$9|L|A|M|B|C]|$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|D]]|E|@]|F|$]]|$1|G|3|-4|5|6|7|V|8|@]|E|@]|F|$]]]|H|$]]

<p>Create another container <code>div</code> for the elements above <code>#copyright</code>. Just above copyright add a new <code>div</code>:
   <code>&lt;div style="clear:both;"&gt;&lt;/div&gt;</code>
It will force the <strong>footer</strong> to be under everything else, just like in the case of using relative positioning (<code>bottom:0px;</code>).</p>


blocks|key|1018626|text|这里是一种方法，旨在使具有已知高度和宽度(至少大约)的元素向右浮动并停留在底部，同时表现为其他元素的内联元素。它被聚焦在右下角，因为您可以通过其他方法轻松地将其放置在任何其他角落。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1018627|我需要做一个导航栏，在右下角有实际的链接和随机的兄弟元素，同时确保栏本身正确伸展，而不会破坏布局。我使用"shadow“元素来占据导航栏的链接空间，并将其添加到容器的子节点的末尾。|1018628|1018629|<!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>|code-block|syntax|javascript|1018630|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|N|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|O|8|@]|9|@]|A|$H|I]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Here is an approach targeted at making an element with a known height and width (at least approximately) float to the right and stay at the bottom, while behaving as an inline element to the other elements. It is focused at the bottom-right because you can place it easily in any other corner through other methods.</p>

<p>I needed to make a navigation bar which would have the actual links at the bottom right, and random sibling elements, while ensuring that the bar itself stretched properly, without disrupting the layout. I used a "shadow" element to occupy the navigation bar's links' space and added it at the end of the container's child nodes.</p>

<hr>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;div id="container"&gt;
  &lt;!-- Other elements here --&gt;
  &lt;div id="copyright"&gt;
    Copyright Foo web designs
  &lt;/div&gt;
  &lt;span id="copyright-s"&gt;filler&lt;/span&gt;
&lt;/div&gt;

&lt;style&gt;
  #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 */
  }
&lt;/style&gt;
</code></pre>


blocks|key|3529900|text|是的，你可以在没有absolute定位和不使用table的情况下做到这一点(不需要使用标记等等)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|3529901|DEMO|3529902|这是测试工作在IE>7，铬，FF+&是一个非常容易的事情添加到您现有的布局。|3529903|<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>|code-block|syntax|javascript|3529904|#container+{
++++height:100%25;
++++border-collapse:collapse;
++++display+:+table;
}

.foot+{
++++display+:+table-row;
++++vertical-align+:+bottom;
++++height+:+1px;
}|3529905|它有效地做了float:bottom会做的事情，甚至解决了@Rick+Reilly的答案中指出的问题！|3529906|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/3Myn2/1/^0|0|3|9|8|N|5|0|0|4|0|0|0|0|0|6|C|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|D]|$9|16|A|17|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|18|8|@]|E|@$9|19|A|1A|1|1B]]|F|$]]|$1|I|3|J|5|6|7|1C|8|@]|E|@]|F|$]]|$1|K|3|L|5|M|7|1D|8|@]|E|@]|F|$N|O]]|$1|P|3|Q|5|M|7|1E|8|@]|E|@]|F|$N|O]]|$1|R|3|S|5|6|7|1F|8|@$9|1G|A|1H|B|D]]|E|@]|F|$]]|$1|T|3|-4|5|6|7|1I|8|@]|E|@]|F|$]]]|U|$V|$5|W|X|Y|F|$Z|10]]]]

<p><strong>Yes</strong> you can do this without <code>absolute</code> positioning and without using <code>table</code>s (which screw with markup and such).<br/></p>

<p><a href="http://jsfiddle.net/3Myn2/1/">DEMO</a><br/>
This is tested to work on IE>7, chrome, FF &amp; is a really easy thing to add to your existing layout.</p>



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

    &lt;div class="foot"&gt;
        Some other content you want kept to the bottom
        &lt;div&gt;this is in a div&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>



<pre><code>#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}
</code></pre>

<p>It effectively does what <code>float:bottom</code> would, even accounting for the issue pointed out in @Rick Reilly's answer!</p>


blocks|key|312131|text|这是一个古老的问题，但这是一种独特的方法，可以在几种情况下有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|312132|纯CSS，无绝对定位，无固定高度，跨浏览器(IE9%2B)|312133|查看该|312134|因为正常的流是“从上到下”的，所以我们不能简单地要求#copyright+div在没有某种绝对定位的情况下粘在父目录的底部，但是如果我们想让#copyright+div坚持到父目录的顶部，这将非常简单-因为这是正常的流程方式。|offset|length|style|CODE|312135|因此，我们将利用这一点作为优势。我们将更改HTML的顺序，现在#copyright目录在顶部，内容紧跟其后。我们还让内容div完全伸展(使用伪元素和清除技术)|312136|现在只是在视图中颠倒顺序的问题。这可以很容易地通过CSS转换完成。|312137|我们将容器旋转180度，现在:向上就是向下。(我们反转内容以使其看起来再次正常)|312138|如果我们想在内容区域中有一个滚动条，我们需要应用更多的CSS魔力。正如该示例中的所示，内容位于标题之下-但其概念相同|312139|​|312140|*+{
++margin:+0;
++padding:+0;
}

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

#Container:before+{
++content:+'';
++height:+100%25;
++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);
}|code-block|syntax|javascript|312141|<div+id="Container">
++<div+id="Copyright">
++++Copyright+Foo+web+designs
++</div>
++<div+id="Stretch">
++++
++++<div>Element+1</div>
++++<div>Element+2</div>
++</div>
</div>|312142|312143|entityMap^0|0|0|0|Q|A|1Y|A|0|V|A|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|18|8|@$H|19|I|1A|J|K]|$H|1B|I|1C|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1D|8|@$H|1E|I|1F|J|K]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1G|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1H|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1I|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1J|8|@]|9|@]|A|$]]|$1|V|3|W|5|X|7|1K|8|@]|9|@]|A|$Y|Z]]|$1|10|3|11|5|X|7|1L|8|@]|9|@]|A|$Y|Z]]|$1|12|3|U|5|6|7|1M|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|14|$]]

<p>Its an old question, but this is a unique approach that can help in several cases.</p>

<h2>Pure CSS, Without Absolute positioning, Without Fixing any Height, Cross-Browser (IE9+)</h2>

<p>check out that <a href="http://jsfiddle.net/avrahamcool/e64nf/" rel="nofollow noreferrer"><strong>Working Fiddle</strong></a></p>

<p>Because normal flow is 'top-to-bottom' we can't simply ask the <code>#copyright</code> div to stick to the bottom of his parent without absolutely positioning of some sort, But if we wanted the <code>#copyright</code> div to stick to the top of his parent, it will be very simple - because this is the normal flow way.</p>

<p>So we will use this in our advantage.
we will change the order of the <code>div</code>s in the HTML, now the <code>#copyright</code> div is at the top, and the content follow it right away.
we also make the content div stretch all the way (using pseudo elements and clearing techniques)</p>

<p>now it's just a matter of inverting that order back in the view. that can be easily done with CSS transform.</p>

<p>We rotate the container by 180deg, and now: up-is-down. (and we inverse back the content to look normal again)</p>

<p>If we want to have a scroolbar within the content area, we need to apply a little bit more of CSS magic. as can be showed <a href="http://jsfiddle.net/avrahamcool/q6jGr/5/" rel="nofollow noreferrer"><strong>Here</strong></a> [in that example, the content is below a header - but its the same idea]</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  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&gt;div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="Container"&gt;
  &lt;div id="Copyright"&gt;
    Copyright Foo web designs
  &lt;/div&gt;
  &lt;div id="Stretch"&gt;
    &lt;!-- Other elements here --&gt;
    &lt;div&gt;Element 1&lt;/div&gt;
    &lt;div&gt;Element 2&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4377286|text|如果您不知道子块的高度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4377287|​|4377288|#parent+{
++++background:green;
++++width:200px;
++++height:200px;
++++display:table-cell;
++++vertical-align:bottom;
}
.child+{
++++background:red;
++++vertical-align:bottom;
}|code-block|syntax|javascript|4377289|<div+id="parent">
++++<div+class="child">child
++++</div>+
</div>|4377290|4377291|http://jsbin.com/ULUXIFon/3/edit|offset|length|4377292|如果您知道子块的高度，则添加子块，然后添加padding/+block+top：|4377293|4377294|#parent+{
++++background:green;
++++width:200px;
++++height:130px;
++++padding-top:70px;
}
.child+{
++++background:red;
++++vertical-align:
++++bottom;
++++height:130px;
}|4377295|<div+id="parent">
++++<div+class="child">child
++++</div>+
</div>++|4377296|4377297|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|W|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|19|8|@]|9|@$N|1A|O|1B|1|1C]]|A|$]]|$1|P|3|Q|5|6|7|1D|8|@]|9|@]|A|$]]|$1|R|3|C|5|6|7|1E|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1F|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|W|3|C|5|6|7|1H|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|M]]]]

<p>If you do not know the height of child block:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#parent {
    background:green;
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:bottom;
}
.child {
    background:red;
    vertical-align:bottom;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="parent"&gt;
    &lt;div class="child"&gt;child
    &lt;/div&gt; 
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsbin.com/ULUXIFon/3/edit" rel="nofollow noreferrer">http://jsbin.com/ULUXIFon/3/edit</a></p>

<p>If you know the height of the child block add the child block then add padding-top/margin-top:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#parent {
    background:green;
    width:200px;
    height:130px;
    padding-top:70px;
}
.child {
    background:red;
    vertical-align:
    bottom;
    height:130px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="parent"&gt;
    &lt;div class="child"&gt;child
    &lt;/div&gt; 
&lt;/div&gt;  </code></pre>
</div>
</div>
</p>


blocks|key|3530068|text|也许这对某些人有帮助:你可以将div放在另一个div之外，然后使用负边距向上推送它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3530069|<div+id="container"+style="background-color:+#ccc;+padding-bottom:+30px;">
++Hello!
</div>
<div+id="copyright"+style="margin-top:+-20px;">
++Copyright+Foo+web+designs
</div>|code-block|syntax|javascript|3530070|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Maybe this helps someone: You can always place the div outside the other div and then push it upwards using negative margin:</p>

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


blocks|key|3530107|text|虽然这里提供的答案似乎都不适用于我的特定情况，但我遇到了this+article，它提供了这个整洁的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3530108|#container+{
++display:+table;
}

#copyright+{
++display:+table-footer-group;
}|code-block|syntax|javascript|3530109|我发现它非常适用于移动显示的响应式设计，而不必重新排序网站的所有html代码，将body本身设置为表格。|style|CODE|3530110|请注意，只有第一个table-footer-group或table-header-group将呈现为table-row-group：如果有多个，则其他将呈现为table-row-group。|3530111|entityMap|0|LINK|mutability|MUTABLE|url|http://tanalin.com/en/articles/css-block-order/^0|S|C|0|0|0|14|4|0|9|I|S|I|1E|F|27|F|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@$A|12|B|13|K|L]]|9|@]|C|$]]|$1|M|3|N|5|6|7|14|8|@$A|15|B|16|K|L]|$A|17|B|18|K|L]|$A|19|B|1A|K|L]|$A|1B|B|1C|K|L]]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>While none of the answers provided here seemed to apply or work in my particular case, I came across <a href="http://tanalin.com/en/articles/css-block-order/" rel="noreferrer">this article</a> which provides this neat solution :</p>

<pre><code>#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}
</code></pre>

<p>I find it very useful for applying responsive design for mobile display without having to reorder all the html code of a website, setting <code>body</code> itself as a table.</p>

<p>Note that only the first <code>table-footer-group</code> or <code>table-header-group</code> will be rendered as such : if there are more than one, the others will be rendered as <code>table-row-group</code>.</p>


blocks|key|4377497|text|flexbox方法！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4377498|在supported+browsers中，您可以使用以下内容：|offset|length|4377499|4377500|.parent+{
++display:+flex;
++flex-direction:+column;
}
.child+{
++margin-top:+auto;
}|code-block|syntax|javascript|4377501|​|4377502|.parent+{
++height:+100px;
++border:+5px+solid+#000;
++display:+flex;
++flex-direction:+column;
}
.child+{
++height:+40px;
++width:+100%25;
++background:+#f00;
++margin-top:+auto;
}|4377503|<div+class="parent">
++<div+class="child">Align+to+the+bottom</div>
</div>|4377504|4377505|4377506|上面的解决方案可能更灵活，但是，这里有一个替代解决方案：|4377507|4377508|.parent+{
++display:+flex;
}
.child+{
++align-self:+flex-end;
}|4377509|4377510|.parent+{
++height:+100px;
++border:+5px+solid+#000;
++display:+flex;
}
.child+{
++height:+40px;
++width:+100%25;
++background:+#f00;
++align-self:+flex-end;
}|4377511|<div+class="parent">
++<div+class="child">Align+to+the+bottom</div>
</div>|4377512|4377513|4377514|作为附注，您可能希望添加供应商前缀以获得额外的支持。|4377515|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#feat=flexbox^0|0|1|I|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@]|9|@$D|1H|E|1I|1|1J]]|A|$]]|$1|F|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|1L|8|@]|9|@]|A|$J|K]]|$1|L|3|M|5|6|7|1M|8|@]|9|@]|A|$]]|$1|N|3|O|5|I|7|1N|8|@]|9|@]|A|$J|K]]|$1|P|3|Q|5|I|7|1O|8|@]|9|@]|A|$J|K]]|$1|R|3|M|5|6|7|1P|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1R|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]|$1|W|3|X|5|I|7|1T|8|@]|9|@]|A|$J|K]]|$1|Y|3|M|5|6|7|1U|8|@]|9|@]|A|$]]|$1|Z|3|10|5|I|7|1V|8|@]|9|@]|A|$J|K]]|$1|11|3|12|5|I|7|1W|8|@]|9|@]|A|$J|K]]|$1|13|3|M|5|6|7|1X|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|18|$19|$5|1A|1B|1C|A|$1D|1E]]]]

<h2>The flexbox approach!</h2>

<p>In <a href="http://caniuse.com/#feat=flexbox" rel="noreferrer">supported browsers</a>, you can use the following:</p>

<p><a href="http://jsfiddle.net/bv1rs8s1/" rel="noreferrer"><strong>Example Here</strong></a></p>



<pre class="lang-css prettyprint-override"><code>.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
  &lt;div class="child"&gt;Align to the bottom&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<hr>

<p>The solution above is probably more flexible, however, here is an alternative solution:</p>

<p><a href="http://jsfiddle.net/rh4Lc5dr/" rel="noreferrer"><strong>Example Here</strong></a></p>

<pre class="lang-css prettyprint-override"><code>.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
  &lt;div class="child"&gt;Align to the bottom&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<hr>

<p>As a side note, you may want to add vendor prefixes for additional support.</p>


blocks|key|3530174|text|使用translateY和top属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3530175|只需将元素子元素设置为position:+relative，然后将其移到顶部:+100%25+(这是父元素高度的100%25+)，然后通过transform:+translateY(+-100%25+)+(这是子元素高度的-100%25)粘贴到父元素的底部。|3530176|BenefitS|3530177|3530178|you+do+not+the+element+from+the+page+flow|unordered-list-item|offset|length|style|BOLD|3530179|it+is+dynamic|3530180|3530181|但仍然只是解决方法:(|3530182|.copyright{
+++position:+relative;
+++top:+100%25;
+++transform:+translateY(-100%25);
}|code-block|syntax|javascript|3530183|别忘了旧版浏览器的前缀。|3530184|entityMap^0|0|0|0|0|4|6|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|15|8|@$J|16|K|17|L|M]]|9|@]|A|$]]|$1|N|3|O|5|I|7|18|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|19|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@]|A|$]]|$1|S|3|T|5|U|7|1B|8|@]|9|@]|A|$V|W]]|$1|X|3|Y|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|10|$]]

<h1>Using the translateY and top property</h1>

<p>Just set element child to position: relative and than move it top: 100% (that's the 100% height of the parent) and stick to bottom of parent by transform: translateY(-100%) (that's -100% of the height of the child).</p>

<p>BenefitS</p>

<ul>
<li>you <strong>do not</strong> take the element from the page flow</li>
<li>it is dynamic</li>
</ul>

<p>But still just workaround :(</p>

<pre><code>.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}
</code></pre>

<p>Don't forget prefixes for the older browser.</p>


blocks|key|3530196|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3530197|+#container{width:100%25;+float:left;+position:relative;}
#copyright{position:absolute;+bottom:0px;+left:0px;+background:#F00;+width:100%25;}
#container{background:gray;+height:100px;}|code-block|syntax|javascript|3530198|<div+id="container">
++
++<div+id="copyright">
++++Copyright+Foo+web+designs
++</div>
</div>|3530199|3530200|3530201|<div+id="container">
++
++<div+id="copyright">
++++Copyright+Foo+web+designs
++</div>
</div>|3530202|3530203|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|J|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|O|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code> #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;!-- Other elements here --&gt;
  &lt;div id="copyright"&gt;
    Copyright Foo web designs
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;!-- Other elements here --&gt;
  &lt;div id="copyright"&gt;
    Copyright Foo web designs
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3530271|text|对于那些在容器中只有一个子目录的目录，您可以使用table-cell和vertical-align方法，该方法可以可靠地将单个div定位在父目录的底部。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3530272|请注意，使用table-footer-group作为提到的其他答案将中断父table的高度计算。|3530273|​|3530274|#container+{
++++display:+table;
++++width:+100%25;
++++height:+200px;
}
#item+{
++++display:+table-cell;
++++vertical-align:+bottom;
}|code-block|syntax|javascript|3530275|<div+id="container">
++++<div+id="item">Single+bottom+item</div>
</div>|3530276|3530277|entityMap^0|O|A|Z|E|0|6|I|11|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|16|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|S|$]]

<p>For those only have one child in the container, you can use the <code>table-cell</code> and <code>vertical-align</code> approach which worked reliably for positioning a single div at the bottom of its parent.</p>

<p>Note that using <code>table-footer-group</code> as other answers mentioned will break the height calculation of parent <code>table</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="item"&gt;Single bottom item&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3530315|text|CSS网格|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3530316|由于CSS+Grid的使用越来越多，我建议对网格容器中的元素使用。|3530317|对于以下示例，align-self可以包含任何值：end、self-end、flex-end。|offset|length|style|CODE|3530318|​|3530319|#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;
}|code-block|syntax|javascript|3530320|<div+id="parent">
++
++<div+id="child1">
++++1
++</div>

</div>|3530321|3530322|entityMap^0|0|0|7|A|P|3|T|8|12|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@$F|Y|G|Z|H|I]|$F|10|G|11|H|I]|$F|12|G|13|H|I]|$F|14|G|15|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|16|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|17|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|18|8|@]|9|@]|A|$O|P]]|$1|S|3|K|5|6|7|19|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|U|$]]

<h2>CSS Grid</h2>

<p>Since the usage of CSS Grid is increasing, I would like to suggest <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self" rel="noreferrer"><strong><code>align-self</code></strong></a> to the element that is inside a grid container.</p>

<p><code>align-self</code> can contain any of the values: <code>end</code>, <code>self-end</code>, <code>flex-end</code> for the following example.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="parent"&gt;
  &lt;!-- Other elements here --&gt;
  &lt;div id="child1"&gt;
    1
  &lt;/div&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3530363|text|我不想用“位置:绝对”来表示底部的粘性页脚。然后你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3530364|​|3530365|+html,
++++++++body+{
++++++++++++height:+100%25;
++++++++++++margin:+0;
++++++++}
++++++++.wrapper+{
++++++++++++min-height:+100%25;
++++++++++++/*+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;
++++++++}|code-block|syntax|javascript|3530366|<html>
<body>
++++
++++<div+class="wrapper">
++++++++<div+class="content">content</div>
++++++++<div+class="push"></div>
++++</div>
++++<footer+class="footer">test</footer>
</body>
</html>|3530367|3530368|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Don't wanna use "position:absolute" for sticky footer at bottom. Then you can do this way:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code> 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;
        }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;body&gt;
    &lt;!--HTML Code--&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="content"&gt;content&lt;/div&gt;
        &lt;div class="push"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;footer class="footer"&gt;test&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3530475|text|根据：w3schools.com|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3530476|绝对位置元素的位置：|3530477|；是相对于最近定位的祖先定位的(而不是相对于视口定位的，如固定)。|blockquote|3530478|3530479|3530480|因此，您需要使用相对或绝对等属性来定位父元素，并将所需元素定位为绝对元素，后者将bottom设置为0。|3530481|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/css/css_positioning.asp^0|3|D|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>According: <a href="https://www.w3schools.com/css/css_positioning.asp" rel="nofollow noreferrer">w3schools.com</a></p>

<blockquote>
  <p>An element with position: absolute; is positioned relative to the
  nearest positioned ancestor (instead of positioned relative to the
  viewport, like fixed).</p>
</blockquote>

<p>So you need to position the parent element with something either relative or absolute, etc and position the desired element to absolute and latter set bottom to 0.</p>


blocks|key|4377946|text|此特定场景的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4377947|将内部放在父级的底部。父级的高度由其“最高”同级的高度设置|offset|length|style|BOLD|4377948|设置：|4377949|我有一行，在另一行中，多个<div+class="container">|CODE|4377950|These+<div+class="footer">|unordered-list-item|4377951|
是相邻的，另一个|4377952|有3个内部<div+class="container">，分别是：<div+class="title">，<div+class="content">，<div+class="footer">|4377953|4377954|想要的结果：|4377955|4377956|所有的<div+class="container">都有相同的高度。高度未在px中定义，它将是them.|4377957|<div+class="title">中“最高”的高度应位于<div+class="container">|4377958|<div+class="content">的顶部应放置在<div+class="title">|4377959|<div+class="footer">的下方应放置在<div+class="container">的底部而不与以前的content|4377960|重叠|4377961|这是当前状态：https://codepen.io/xavier-atero/pen/ExvWQww|4377962|​|4377963|📷|atomic|4377964|4377965|4377966|.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;
}|code-block|syntax|javascript|4377967|<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>|4377968|4377969|使用FLEXBOX+__________的__________解决方案|4377970|这就是结果：https://codepen.io/xavier-atero/pen/MWvpBMz|4377971|4377972|4377973|4377974|4377975|.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;
}|4377976|<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>|4377977|4377978|采用TABLE-ROW+__________的__________解决方案|4377979|这就是结果：https://codepen.io/xavier-atero/pen/rNzyKJm|4377980|4377981|4377982|4377983|4377984|.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;
}|4377985|<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>|4377986|4377987|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/xavier-atero/pen/ExvWQww|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/7d0f00b55c5034b7fd64daa905e8153a.png|imageAlt|2|https://codepen.io/xavier-atero/pen/MWvpBMz|3|https://ask.qcloudimg.com/http-save/yehe-900000/40e91514f1e16dd1f1ee54dafb5411ef.png|4|https://codepen.io/xavier-atero/pen/rNzyKJm|5|https://ask.qcloudimg.com/http-save/yehe-900000/728890b3ca53760154419217dabedad4.png^0|0|0|O|0|0|D|N|0|6|K|0|0|5|N|X|J|1H|L|23|K|0|0|0|0|3|N|0|0|J|U|N|0|0|L|S|J|0|0|K|R|N|0|0|7|17|0|0|0|0|1|1|0|0|0|0|0|0|L|E|0|0|1D|6|17|2|0|0|1|0|0|1|0|1|3|0|0|1|0|0|1|0|0|BX|0|0|QS|0|0|1|0|0|M|N|E|0|0|1D|6|17|4|0|0|1|0|0|1|0|1|5|0|0|1|0|0|1|0|0|D8|0|0|QS|0|0|1|0^^$0|@$1|2|3|4|5|6|7|30|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|31|8|@$D|32|E|33|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|34|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|35|8|@$D|36|E|37|F|L]]|9|@]|A|$]]|$1|M|3|N|5|O|7|38|8|@$D|39|E|3A|F|L]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|3B|8|@]|9|@]|A|$]]|$1|R|3|S|5|O|7|3C|8|@$D|3D|E|3E|F|L]|$D|3F|E|3G|F|L]|$D|3H|E|3I|F|L]|$D|3J|E|3K|F|L]]|9|@]|A|$]]|$1|T|3|-4|5|6|7|3L|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|3M|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|3N|8|@]|9|@]|A|$]]|$1|X|3|Y|5|O|7|3O|8|@$D|3P|E|3Q|F|L]]|9|@]|A|$]]|$1|Z|3|10|5|O|7|3R|8|@$D|3S|E|3T|F|L]|$D|3U|E|3V|F|L]]|9|@]|A|$]]|$1|11|3|12|5|O|7|3W|8|@$D|3X|E|3Y|F|L]|$D|3Z|E|40|F|L]]|9|@]|A|$]]|$1|13|3|14|5|O|7|41|8|@$D|42|E|43|F|L]|$D|44|E|45|F|L]]|9|@]|A|$]]|$1|15|3|16|5|6|7|46|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|47|8|@]|9|@$D|48|E|49|1|4A]]|A|$]]|$1|19|3|1A|5|6|7|4B|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|1D|7|4C|8|@]|9|@$D|4D|E|4E|1|4F]]|A|$]]|$1|1E|3|1A|5|6|7|4G|8|@]|9|@]|A|$]]|$1|1F|3|1A|5|6|7|4H|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|1I|7|4I|8|@]|9|@]|A|$1J|1K]]|$1|1L|3|1M|5|1I|7|4J|8|@]|9|@]|A|$1J|1K]]|$1|1N|3|1A|5|6|7|4K|8|@]|9|@]|A|$]]|$1|1O|3|1P|5|6|7|4L|8|@$D|4M|E|4N|F|G]]|9|@]|A|$]]|$1|1Q|3|1R|5|6|7|4O|8|@$D|4P|E|4Q|F|G]]|9|@$D|4R|E|4S|1|4T]]|A|$]]|$1|1S|3|1A|5|6|7|4U|8|@$D|4V|E|4W|F|G]]|9|@]|A|$]]|$1|1T|3|1C|5|1D|7|4X|8|@$D|4Y|E|4Z|F|G]]|9|@$D|50|E|51|1|52]]|A|$]]|$1|1U|3|1A|5|6|7|53|8|@$D|54|E|55|F|G]]|9|@]|A|$]]|$1|1V|3|1A|5|6|7|56|8|@$D|57|E|58|F|G]]|9|@]|A|$]]|$1|1W|3|1X|5|1I|7|59|8|@$D|5A|E|5B|F|G]]|9|@]|A|$1J|1K]]|$1|1Y|3|1Z|5|1I|7|5C|8|@$D|5D|E|5E|F|G]]|9|@]|A|$1J|1K]]|$1|20|3|1A|5|6|7|5F|8|@$D|5G|E|5H|F|G]]|9|@]|A|$]]|$1|21|3|22|5|6|7|5I|8|@$D|5J|E|5K|F|G]|$D|5L|E|5M|F|G]]|9|@]|A|$]]|$1|23|3|24|5|6|7|5N|8|@$D|5O|E|5P|F|G]]|9|@$D|5Q|E|5R|1|5S]]|A|$]]|$1|25|3|1A|5|6|7|5T|8|@$D|5U|E|5V|F|G]]|9|@]|A|$]]|$1|26|3|1C|5|1D|7|5W|8|@$D|5X|E|5Y|F|G]]|9|@$D|5Z|E|60|1|61]]|A|$]]|$1|27|3|1A|5|6|7|62|8|@$D|63|E|64|F|G]]|9|@]|A|$]]|$1|28|3|1A|5|6|7|65|8|@$D|66|E|67|F|G]]|9|@]|A|$]]|$1|29|3|2A|5|1I|7|68|8|@$D|69|E|6A|F|G]]|9|@]|A|$1J|1K]]|$1|2B|3|2C|5|1I|7|6B|8|@$D|6C|E|6D|F|G]]|9|@]|A|$1J|1K]]|$1|2D|3|1A|5|6|7|6E|8|@$D|6F|E|6G|F|G]]|9|@]|A|$]]|$1|2E|3|-4|5|6|7|6H|8|@]|9|@]|A|$]]]|2F|$2G|$5|2H|2I|2J|A|$2K|2L]]|2M|$5|2N|2I|2O|A|$2P|2Q|2R|-4]]|2S|$5|2H|2I|2J|A|$2K|2T]]|2U|$5|2N|2I|2O|A|$2P|2V|2R|-4]]|2W|$5|2H|2I|2J|A|$2K|2X]]|2Y|$5|2N|2I|2O|A|$2P|2Z|2R|-4]]]]

<p>Solution for this specific scenario:</p>
<p><strong>Place inner  at the bottom of parent . The height of the parent  is set by the height of its &quot;tallest&quot; sibling </strong></p>
<p>The set up:</p>
<ul>
<li>I have a row with multiple <code>&lt;div class=&quot;container&quot;&gt;</code></li>
<li>These <code>&lt;div class=&quot;container&quot;&gt;</code> are next to each other inside another <code>&lt;div class=&quot;supercontainer&quot;&gt;</code></li>
<li>Each <code>&lt;div class=&quot;container&quot;&gt;</code> has 3 inner divs on top of each other: <code>&lt;div class=&quot;title&quot;&gt;</code>, <code>&lt;div class=&quot;content&quot;&gt;</code>, <code>&lt;div class=&quot;footer&quot;&gt;</code></li>
</ul>
<p>The desired result:</p>
<ul>
<li>All <code>&lt;div class=&quot;container&quot;&gt;</code> have the same height. The height is not defined in px, it will be the height of the &quot;tallest&quot; among them.</li>
<li><code>&lt;div class=&quot;title&quot;&gt;</code> should be at the top of <code>&lt;div class=&quot;container&quot;&gt;</code></li>
<li><code>&lt;div class=&quot;content&quot;&gt;</code> should be placed below <code>&lt;div class=&quot;title&quot;&gt;</code></li>
<li><code>&lt;div class=&quot;footer&quot;&gt;</code> should be placed at the bottom of <code>&lt;div class=&quot;container&quot;&gt;</code> without overlapping with the previous content</li>
</ul>
<p>This is the current state: <a href="https://codepen.io/xavier-atero/pen/ExvWQww" rel="nofollow noreferrer">https://codepen.io/xavier-atero/pen/ExvWQww</a></p>
<p><a href="https://i.stack.imgur.com/2nO8f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2nO8f.png" alt="enter image description here" /></a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div class="supercontainer"&gt;
    &lt;div class="container"&gt; 
      &lt;div class="title"&gt;
        This part represents the title and it is placed on top
      &lt;/div&gt; 
      &lt;div class="content"&gt;
        This one represents the body and it is placed below the title
      &lt;/div&gt; 
      &lt;div class="footer"&gt; 
        And this one is the footer. It should always be at the bottom of the container
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="other-container"&gt; 
      &lt;div class="title"&gt;
        This part represents the title and it is placed on top.
      &lt;/div&gt; 
      &lt;div class="content"&gt;
        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.
      &lt;/div&gt; 
      &lt;div class="footer"&gt; 
        And this one is the footer. It should always be at the bottom of the container
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>
<p><strong>__________ Solution with FLEXBOX __________</strong></p>
<p>This is the outcome: <a href="https://codepen.io/xavier-atero/pen/MWvpBMz" rel="nofollow noreferrer">https://codepen.io/xavier-atero/pen/MWvpBMz</a></p>
<p><a href="https://i.stack.imgur.com/vM1OB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vM1OB.png" alt="enter image description here" /></a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div class="supercontainer"&gt;
    &lt;div class="container"&gt; 
      &lt;div class="title"&gt;
        This part represents the title and it is placed on top
      &lt;/div&gt; 
      &lt;div class="content"&gt;
        This one represents the body and it is placed below the title
      &lt;/div&gt; 
      &lt;div class="footer"&gt; 
        And this one is the footer. It should always be at the bottom of the container
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="other-container"&gt; 
      &lt;div class="title"&gt;
        This part represents the title and it is placed on top.
      &lt;/div&gt; 
      &lt;div class="content"&gt;
        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.
      &lt;/div&gt; 
      &lt;div class="footer"&gt; 
        And this one is the footer. It should always be at the bottom of the container
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>
<p><strong>__________ Solution with TABLE-ROW __________</strong></p>
<p>This is the outcome: <a href="https://codepen.io/xavier-atero/pen/rNzyKJm" rel="nofollow noreferrer">https://codepen.io/xavier-atero/pen/rNzyKJm</a></p>
<p><a href="https://i.stack.imgur.com/uY4Qe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uY4Qe.png" alt="enter image description here" /></a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div class="supercontainer"&gt;
    &lt;div class="container"&gt; 
      &lt;div class="title"&gt;
        This part represents the title and it is placed on top
      &lt;/div&gt; 
      &lt;div class="content"&gt;
        This one represents the body and it is placed below the title
      &lt;/div&gt; 
      &lt;div class="footer"&gt; 
        And this one is the footer. It should always be at the bottom of the container
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="other-container"&gt; 
      &lt;div class="title"&gt;
        This part represents the title and it is placed on top.
      &lt;/div&gt; 
      &lt;div class="content"&gt;
        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.
      &lt;/div&gt; 
      &lt;div class="footer"&gt; 
        And this one is the footer. It should always be at the bottom of the container
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1024204|text|您可以通过将可用空间分配给顶部的内容来使用网格：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1024205|​|1024206|+#container+{
++++display:+grid;
++++grid-template-rows:+1fr+auto;
++++height:+10rem;+/*+or+100%25+or+anything+*/
}|code-block|syntax|javascript|1024207|<div+id="container">
++This+is+random+content.
++<div+id="copyright">
++++Copyright+Foo+web+designs
++</div>
</div>|1024208|1024209|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>You can use grid by assigning the available space to the content at the top:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code> #container {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 10rem; /* or 100% or anything */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  This is random content.
  &lt;div id="copyright"&gt;
    Copyright Foo web designs
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>Given the following HTML:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;!-- Other elements here --&gt;
  &lt;div id="copyright"&gt;
    Copyright Foo web designs
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>I would like <code>#copyright</code> to stick to the bottom of <code>#container</code>. Can I achieve this without using absolute positioning?</p>


How can I position my div at the bottom of its container?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

给定以下HTML：​<div id="container">    <div id="copyright">    Copyright Foo web designs  </div></div>​我希望#copyright坚持在#container的底部。我可以在...

问如何将div放置在其容器的底部？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将div放置在其容器的底部？EN