blocks|key|1347075|text|这是一种方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1347076|<div+style="position:+relative;+
++++++++++++width:+200px;+
++++++++++++height:+150px;+
++++++++++++border:+1px+solid+black;">

++++<div+style="position:+absolute;+
++++++++++++++++bottom:+0;+
++++++++++++++++width:+100%25;+
++++++++++++++++height:+50px;+
++++++++++++++++border:+1px+solid+red;">
++++</div>
</div>|code-block|syntax|javascript|1347077|但是因为内部div的位置是绝对的，所以你必须总是担心外部div中的其他内容会与它重叠(并且你总是必须设置固定的高度)。|1347078|如果可以，最好是将内部div设置为外部div中最后一个DOM对象，并将其设置为"clear:+both“。|1347079|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This is one way</p>

<pre class="lang-html prettyprint-override"><code>&lt;div style="position: relative; 
            width: 200px; 
            height: 150px; 
            border: 1px solid black;"&gt;

    &lt;div style="position: absolute; 
                bottom: 0; 
                width: 100%; 
                height: 50px; 
                border: 1px solid red;"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>But because the inner div is positioned absolutely, you'll always have to worry about other content in the outer div overlapping it (and you'll always have to set fixed heights).</p>

<p>If you can do it, it's better to make that inner div the last DOM object in your outer div and have it set to "clear: both".</p>


blocks|key|1131909|text|一种灵活的方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1131910|HTML：|1131911|<div+class="parent">
++<div>Images,+text,+buttons+oh+my!</div>
++<div>Bottom</div>
</div>|code-block|syntax|javascript|1131912|CSS：|1131913|.parent+{
++display:+flex;
++flex-direction:+column;
++justify-content:+space-between;
}

/*++not+necessary,+just+to+visualize+it+*/

.parent+{
++height:+500px;
++border:+1px+solid+black;
}


.parent+div+{
++border:+1px+solid+red;
}|1131914|​|1131915|📷|atomic|offset|length|1131916|1131917|编辑：|1131918|来源-+Flexbox+Guide|1131919|浏览器支持flexbox+-+Caniuse|1131920|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/cab5116b283d1681f1d8aa01f636e882.png|imageAlt|1|LINK|MUTABLE|url|https://css-tricks.com/snippets/css/a-guide-to-flexbox/|2|http://caniuse.com/#feat=flexbox^0|0|0|0|0|0|0|0|1|0|0|0|0|4|D|1|0|F|7|2|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1H|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1J|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1L|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1M|8|@]|9|@$R|1N|S|1O|1|1P]]|A|$]]|$1|T|3|N|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1R|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1S|8|@]|9|@$R|1T|S|1U|1|1V]]|A|$]]|$1|Y|3|Z|5|6|7|1W|8|@]|9|@$R|1X|S|1Y|1|1Z]]|A|$]]|$1|10|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17|18|-4]]|19|$5|1A|14|1B|A|$1C|1D]]|1E|$5|1A|14|1B|A|$1C|1F]]]]

<p>A flexbox way.</p>

<p>HTML:</p>

<pre><code>&lt;div class="parent"&gt;
  &lt;div&gt;Images, text, buttons oh my!&lt;/div&gt;
  &lt;div&gt;Bottom&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*  not necessary, just to visualize it */

.parent {
  height: 500px;
  border: 1px solid black;
}


.parent div {
  border: 1px solid red;
}
</code></pre>

<p><a href="https://i.stack.imgur.com/eWp6Z.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eWp6Z.png" alt="enter image description here"></a></p>

<p>Edit:</p>

<p>Source - <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer">Flexbox Guide</a></p>

<p>Browser support for flexbox - <a href="http://caniuse.com/#feat=flexbox" rel="noreferrer">Caniuse</a></p>


blocks|key|1347003|text|将外部div设置为position="relative"，内部div设置为position="absolute"，并将其设置为bottom="0"。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1347004|entityMap^0|9|J|11|J|1R|A|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>Make the outer div <code>position="relative"</code> and the inner div <code>position="absolute"</code> and set it's <code>bottom="0"</code>.</p>


blocks|key|1347383|text|这是另一个纯CSS技巧，它不会影响元素流。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1347384|​|1347385|#parent+{
++min-height:+100vh;+/*+set+height+as+you+need+*/
++display:+flex;
++flex-direction:+column;
++background:+grey;
}
.child+{
++margin-top:+auto;
++background:+green;
}|code-block|syntax|javascript|1347386|<div+id="parent">
++<h1>Positioning+with+margin</h1>
++<div+class="child">
++++Content+to+the+bottom
++</div>
</div>|1347387|1347388|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>Here is another pure CSS trick, which doesn't affect an elements flow.</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 {
  min-height: 100vh; /* set height as you need */
  display: flex;
  flex-direction: column;
  background: grey;
}
.child {
  margin-top: auto;
  background: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="parent"&gt;
  &lt;h1&gt;Positioning with margin&lt;/h1&gt;
  &lt;div class="child"&gt;
    Content to the bottom
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1131727|text|您可能不想要绝对定位，因为它会破坏回流:在某些情况下，更好的解决方案是将祖级元素设为display:table;，父元素设为display:table-cell;vertical-align:bottom;。这样做之后，您应该能够给子元素display:inline-block;，它们将自动流向父元素的底部。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1131728|entityMap^0|16|E|1Q|15|3B|L|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>You may not want absolute positioning because it breaks the reflow: in some circumstances, a better solution is to make the grandparent element <code>display:table;</code> and the parent element <code>display:table-cell;vertical-align:bottom;</code>.  After doing this, you should be able to give the the child elements <code>display:inline-block;</code> and they will automagically flow towards the bottom of the parent.</p>


blocks|key|1131781|text|如果你知道父母的身高，下面是避免绝对div和table的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1131782|<div+class="parent">
++++<div+class="child">+<a+href="#">Home</a>
++++</div>
</div>|code-block|syntax|javascript|1131783|CSS：|1131784|.parent+{
++++line-height:80px;
++++border:+1px+solid+black;
}
.child+{
++++line-height:normal;
++++display:+inline-block;
++++vertical-align:bottom;
++++border:+1px+solid+red;
}|1131785|JsFiddle：|1131786|Example|offset|length|1131787|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/5kdj6sae/1/^0|0|0|0|0|0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>Here is way to avoid absolute divs and tables if you know parent's height:</p>

<pre><code>&lt;div class="parent"&gt;
    &lt;div class="child"&gt; &lt;a href="#"&gt;Home&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.parent {
    line-height:80px;
    border: 1px solid black;
}
.child {
    line-height:normal;
    display: inline-block;
    vertical-align:bottom;
    border: 1px solid red;
}
</code></pre>

<p>JsFiddle:</p>

<p><a href="https://jsfiddle.net/5kdj6sae/1/" rel="nofollow">Example</a></p>


blocks|key|1347011|text|<div+style="width:+200px;+height:+150px;+border:+1px+solid+black;position:relative">
++++<div+style="width:+100%25;+height:+50px;+border:+1px+solid+red;position:absolute;bottom:0">
++++</div>
</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1347012|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;div style="width: 200px; height: 150px; border: 1px solid black;position:relative"&gt;
    &lt;div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


<p>The div inside another div picture and code below. Because there will be text and images of the parent div. And red div will be the last element of the parent div.</p>

<p><img src="https://content.screencast.com/users/uzay95/folders/Jing/media/a7d07e37-ac75-4161-83fc-6ff2f0a4ebbc/2010-01-27_1543.png" alt="alt text"></p>

<pre><code>&lt;div style="width: 200px; height: 150px; border: 1px solid black;"&gt;
    &lt;div style="width: 100%; height: 50px; border: 1px solid red;"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


How can I send an inner <div> to the bottom of its parent <div>?

另一个div图片中的div和下面的代码。因为将有父div的文本和图像。而red div将是父div的最后一个元素。​​<div style="width: 200px; height: 150px; border: 1px solid black;">    <div style="width: 100%; height: 50px; border: 1px solid red;">    </d

问如何向其父<div>的底部发送内部<div>？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何向其父<div>的底部发送内部<div>？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何向其父<div>的底部发送内部<div>？
EN