blocks|key|770103|text|父母有身高吗？如果您像这样设置父对象的高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|770104|div.parent+{+height:+300px+};|code-block|syntax|javascript|770105|然后你可以让孩子像这样伸展到完全的高度。|770106|div.child-right+{+height:+100%25+};|770107|编辑|offset|length|style|BOLD|770108|Here+is+how+you+would+do+it+using+JavaScript.|770109|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Wolfy87/czLnf/1/^0|0|0|0|0|0|2|0|0|19|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@$M|15|N|16|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|17|8|@]|9|@$M|18|N|19|1|1A]]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>Does the parent have a height? If you set the parents height like so.</p>

<pre><code>div.parent { height: 300px };
</code></pre>

<p>Then you can make the child stretch to the full height like this.</p>

<pre><code>div.child-right { height: 100% };
</code></pre>

<p><strong>EDIT</strong></p>

<p><a href="http://jsfiddle.net/Wolfy87/czLnf/1/" rel="noreferrer">Here is how you would do it using JavaScript.</a></p>


blocks|key|770128|text|我最近在我的网站上使用jQuery做了这件事。代码计算最高的div的高度，并将其他div设置为相同的高度。下面是技巧：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|770129|http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/|offset|length|770130|我不相信height:100%25会工作，所以如果你不清楚div的高度，我不认为有一个纯粹的CSS解决方案。|style|CODE|770131|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|29|0|0|4|B|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@$D|W|E|X|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]]]

<p>I have recently done this on my website using jQuery.  The code calculates the height of the tallest div and sets the other divs to the same height.  Here's the technique:</p>

<p><a href="http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/" rel="nofollow">http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/</a></p>

<p>I don't believe <code>height:100%</code> will work, so if you don't explicitly know the div heights I don't think there is a pure CSS solution.</p>


blocks|key|1735022|text|对于parent元素，添加以下属性：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1735023|.parent+{
++++overflow:+hidden;
++++position:+relative;
++++width:+100%25;
}|code-block|syntax|javascript|1735024|那么对于.child-right来说：|1735025|.child-right+{
++++background:green;
++++height:+100%25;
++++width:+50%25;
++++position:+absolute;
++++right:+0;
++++top:+0;
}|1735026|使用CSS示例here和有关等高列here的更多信息，可以找到更详细的结果。|1735027|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/nimeguxuda/1/edit?html,css,output|1|http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks^0|2|6|0|0|4|C|0|0|7|4|0|H|4|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]|$9|1C|A|1D|1|1E]]|E|$]]|$1|Q|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

<p>For the <code>parent</code> element, add the following properties:</p>

<pre><code>.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}
</code></pre>

<p>then for <code>.child-right</code> these: </p>

<pre><code>.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}
</code></pre>

<p>Find more detailed results with CSS examples <a href="http://jsbin.com/nimeguxuda/1/edit?html,css,output" rel="noreferrer">here</a> and more information about equal height columns <a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks" rel="noreferrer">here</a>.</p>


blocks|key|1735315|text|这个问题的一个常见解决方案是使用绝对定位或裁剪浮点数，但这些方法比较棘手，因为如果您的列在number%2Bsize中发生更改，则需要对它们进行大量调整，并且您需要确保“主列”始终是最长的。相反，我建议您使用三个更健壮的解决方案之一：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1735316|1735317|display:+flex：是迄今为止最简单最好的解决方案，而且非常灵活--但不受、IE9和display:+table的支持:非常简单，非常兼容(几乎所有浏览器都有)，非常flexible.|ordered-list-item|offset|length|style|CODE|1735318|display:+inline-block;+width:50%25，但有一个负边框:非常简单，但列底边框有点棘手。|1735319|1735320|1.+display:flex|1735321|这真的很简单，很容易适应更复杂或更详细的布局-但flexbox只支持IE10或更高版本(除了其他现代浏览器)。|1735322|示例：+http://output.jsbin.com/hetunujuma/1|BOLD|1735323|相关网址：|1735324|<div+class="parent"><div>column+1</div><div>column+2</div></div>|code-block|syntax|javascript|1735325|相关css:|1735326|.parent+{+display:+-ms-flex;+display:+-webkit-flex;+display:+flex;+}
.parent>div+{+flex:1;+}|1735327|Flexbox支持更多的选项，但只要有任意数量的列就足够了！|1735328|2.<table>或display:+table|1735329|要做到这一点，一个简单且非常兼容的方法是使用table+-，如果你需要旧的IE支持，我建议你先试试。您正在处理列；div%2Bfloat不是最好的方法(更不用说仅仅为了克服css限制而使用多层嵌套div的事实了)，这比仅仅使用一个简单的表更不“语义”。如果您不希望使用css元素，可以考虑使用css+display:+table+(+IE7和更早的版本不支持)。|1735330|示例：+http://jsfiddle.net/emn13/7FFp3/|1735331|与相关的html:+(但请考虑使用普通的<table>+)|1735332|<div+class="parent"><div>column+1</div><div>column+2</div></div>|1735333|1735334|.parent+{+display:+table;+}
.parent+>+div+{display:+table-cell;+width:50%25;+}
/*omit+width:50%25+for+auto-scaled+column+widths*/|1735335|这种方法比使用浮点数的overflow:hidden要健壮得多。您可以添加几乎任何数量的列；如果需要，您可以让它们自动缩放；并且您可以保持与旧浏览器的兼容性。与float解决方案所需的不同，您也不需要事先知道哪一列是最长的；高度缩放也很好。|1735336|KISS:除非你特别需要，否则不要使用浮动黑客。如果IE7是一个问题，我仍然会选择一个包含语义列的普通表，而不是一种难以维护、灵活性较差的技巧-CSS解决方案。|1735337|顺便说一句，如果你需要你的布局是响应式的(例如，在小型手机上没有列)，你可以使用@media查询来回退到小屏幕宽度的普通块布局-无论你使用<table>还是任何其他display:+table元素，这都是有效的。|1735338|3.利润率为负的display:inline+block。|1735339|另一种选择是使用display:inline+block。|1735340|示例：+http://jsbin.com/ovuqes/2/edit|1735341|与相关的html:+(+div标记之间没有空格非常重要！)|1735342|<div+class="parent"><div><div>column+1</div></div><div><div>column+2</div></div></div>|1735343|1735344|.parent+{+
++++position:+relative;+width:+100%25;+white-space:+nowrap;+overflow:+hidden;+
}

.parent>div+{+
++++display:inline-block;+width:50%25;+white-space:normal;+vertical-align:top;+
}

.parent>div>div+{
++++padding-bottom:+32768px;+margin-bottom:+-32768px;+
}|1735345|这有点棘手，负边距意味着列的“真实”底部是模糊的。这反过来意味着您不能相对于这些列的底部定位任何内容，因为这是由overflow:+hidden切断的。请注意，除了内联块之外，您还可以使用浮点数实现类似的效果。|1735346|1735347|TL;DR：如果可以忽略IE9和更老的版本，请使用flexbox；否则，请尝试使用(css)表。如果这两个选项对您都不起作用，那么就有一些负边距问题，但这些问题可能会导致奇怪的显示问题，在开发过程中很容易遗漏这些问题，并且需要注意一些布局限制。|1735348|entityMap|0|LINK|mutability|MUTABLE|url|http://output.jsbin.com/hetunujuma/1|1|http://jsfiddle.net/emn13/7FFp3/|2|http://jsbin.com/ovuqes/2/edit^0|0|0|0|D|1A|E|0|0|W|0|0|3|C|0|0|0|3|4|10|0|0|0|5|0|0|0|6|0|0|0|2|7|A|E|0|M|5|44|E|T|C|44|E|0|0|3|4|W|1|0|1|8|K|7|0|0|0|6|0|0|B|F|0|0|F|0|14|6|1X|7|2A|E|0|8|K|0|8|K|0|0|3|4|U|2|0|1|8|C|3|0|0|0|6|0|0|1K|G|0|0|0|5|P|7|0^^$0|@$1|2|3|4|5|6|7|2J|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|2K|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|2L|8|@$F|2M|G|2N|H|I]|$F|2O|G|2P|H|I]]|9|@]|A|$]]|$1|J|3|K|5|E|7|2Q|8|@$F|2R|G|2S|H|I]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|2T|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|2U|8|@$F|2V|G|2W|H|I]]|9|@]|A|$]]|$1|O|3|P|5|6|7|2X|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|2Y|8|@$F|2Z|G|30|H|S]]|9|@$F|31|G|32|1|33]]|A|$]]|$1|T|3|U|5|6|7|34|8|@$F|35|G|36|H|S]]|9|@]|A|$]]|$1|V|3|W|5|X|7|37|8|@]|9|@]|A|$Y|Z]]|$1|10|3|11|5|6|7|38|8|@$F|39|G|3A|H|S]]|9|@]|A|$]]|$1|12|3|13|5|X|7|3B|8|@]|9|@]|A|$Y|Z]]|$1|14|3|15|5|6|7|3C|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|3D|8|@$F|3E|G|3F|H|I]|$F|3G|G|3H|H|I]]|9|@]|A|$]]|$1|18|3|19|5|6|7|3I|8|@$F|3J|G|3K|H|I]|$F|3L|G|3M|H|I]|$F|3N|G|3O|H|S]|$F|3P|G|3Q|H|S]]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|3R|8|@$F|3S|G|3T|H|S]]|9|@$F|3U|G|3V|1|3W]]|A|$]]|$1|1C|3|1D|5|6|7|3X|8|@$F|3Y|G|3Z|H|S]|$F|40|G|41|H|I]]|9|@]|A|$]]|$1|1E|3|1F|5|X|7|42|8|@]|9|@]|A|$Y|Z]]|$1|1G|3|11|5|6|7|43|8|@$F|44|G|45|H|S]]|9|@]|A|$]]|$1|1H|3|1I|5|X|7|46|8|@]|9|@]|A|$Y|Z]]|$1|1J|3|1K|5|6|7|47|8|@$F|48|G|49|H|I]]|9|@]|A|$]]|$1|1L|3|1M|5|6|7|4A|8|@$F|4B|G|4C|H|S]]|9|@]|A|$]]|$1|1N|3|1O|5|6|7|4D|8|@$F|4E|G|4F|H|I]|$F|4G|G|4H|H|I]|$F|4I|G|4J|H|I]]|9|@]|A|$]]|$1|1P|3|1Q|5|6|7|4K|8|@$F|4L|G|4M|H|I]]|9|@]|A|$]]|$1|1R|3|1S|5|6|7|4N|8|@$F|4O|G|4P|H|I]]|9|@]|A|$]]|$1|1T|3|1U|5|6|7|4Q|8|@$F|4R|G|4S|H|S]]|9|@$F|4T|G|4U|1|4V]]|A|$]]|$1|1V|3|1W|5|6|7|4W|8|@$F|4X|G|4Y|H|S]|$F|4Z|G|50|H|I]]|9|@]|A|$]]|$1|1X|3|1Y|5|X|7|51|8|@]|9|@]|A|$Y|Z]]|$1|1Z|3|11|5|6|7|52|8|@$F|53|G|54|H|S]]|9|@]|A|$]]|$1|20|3|21|5|X|7|55|8|@]|9|@]|A|$Y|Z]]|$1|22|3|23|5|6|7|56|8|@$F|57|G|58|H|I]]|9|@]|A|$]]|$1|24|3|-4|5|6|7|59|8|@]|9|@]|A|$]]|$1|25|3|26|5|6|7|5A|8|@$F|5B|G|5C|H|S]|$F|5D|G|5E|H|S]]|9|@]|A|$]]|$1|27|3|-4|5|6|7|5F|8|@]|9|@]|A|$]]]|28|$29|$5|2A|2B|2C|A|$2D|2E]]|2F|$5|2A|2B|2C|A|$2D|2G]]|2H|$5|2A|2B|2C|A|$2D|2I]]]]

<p>A common solution to this problem uses absolute positioning or cropped floats, but these are tricky in that they require extensive tuning if your columns change in number+size, and that you need to make sure your "main" column is always the longest.  Instead, I'd suggest you use one of three more robust solutions:</p>

<ol>
<li><code>display: flex</code>: by far <strong>the simplest &amp; best solution</strong> and very flexible - but unsupported by IE9 and older.</li>
<li><code>table</code> or <code>display: table</code>:  very simple, very compatible (pretty much every browser ever), quite flexible.</li>
<li><code>display: inline-block; width:50%</code> with a negative margin hack: quite simple, but column-bottom borders are a little tricky.</li>
</ol>

<h2>1. <code>display:flex</code></h2>

<p>This is really simple, and it's easy to adapt to more complex or more detailed layouts - but flexbox is only supported by IE10 or later (in addition to other modern browsers).</p>

<p><strong><em>Example:</em></strong> <a href="http://output.jsbin.com/hetunujuma/1" rel="noreferrer">http://output.jsbin.com/hetunujuma/1</a></p>

<p><strong><em>Relevant html:</em></strong> </p>

<pre><code>&lt;div class="parent"&gt;&lt;div&gt;column 1&lt;/div&gt;&lt;div&gt;column 2&lt;/div&gt;&lt;/div&gt;
</code></pre>

<p><strong><em>Relevant css:</em></strong></p>

<pre><code>.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent&gt;div { flex:1; }
</code></pre>

<p>Flexbox has support for a lot more options, but to simply have any number of columns the above suffices!</p>

<h2>2.<code>&lt;table&gt;</code> or <code>display: table</code></h2>

<p>A simple &amp; extremely compatible way to do this is to use a <code>table</code> - <strong>I'd recommend you try that first if you need old-IE support</strong>.  You're dealing with columns; divs + floats simply aren't the best way to do that (not to mention the fact that multiple levels of nested divs just to hack around css limitations is hardly more "semantic" than just using a simple table).  If you do not wish to use the <code>table</code> element, <strong>consider css <code>display: table</code></strong> (unsupported by IE7 and older).  </p>

<p><strong><em>Example:</em></strong> <a href="http://jsfiddle.net/emn13/7FFp3/" rel="noreferrer">http://jsfiddle.net/emn13/7FFp3/</a></p>

<p><strong><em>Relevant html:</em></strong> (but consider using a plain <code>&lt;table&gt;</code> instead)</p>

<pre><code>&lt;div class="parent"&gt;&lt;div&gt;column 1&lt;/div&gt;&lt;div&gt;column 2&lt;/div&gt;&lt;/div&gt;
</code></pre>

<p><strong><em>Relevant css:</em></strong></p>

<pre><code>.parent { display: table; }
.parent &gt; div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
</code></pre>

<p>This approach is far more robust than using <code>overflow:hidden</code> with floats.  You can add pretty much any number of columns; you can have them <em>auto-scale</em> if you want; and you retain compatibility with ancient browsers.  Unlike the float solution requires, you also don't need to know <em>beforehand</em> which column is longest; the height scales just fine.</p>

<p><strong>KISS:</strong> don't use float hacks unless you specifically need to.  If IE7 is an issue, I'd still pick a plain table with semantic columns over a hard-to-maintain, less flexible trick-CSS solution any day.</p>

<p>By the way, if you need your layout to be responsive (e.g. no columns on small mobile phones) you can use a <code>@media</code> query to fall back to plain block layout for small screen widths - this works whether you use <code>&lt;table&gt;</code> or any other <code>display: table</code> element.</p>

<h2>3. <code>display:inline block</code> with a negative margin hack.</h2>

<p>Another alternative is to use <code>display:inline block</code>.</p>

<p><strong><em>Example:</em></strong> <a href="http://jsbin.com/ovuqes/2/edit" rel="noreferrer">http://jsbin.com/ovuqes/2/edit</a></p>

<p><strong><em>Relevant html:</em></strong> (the absence of spaces between the <code>div</code> tags is significant!)</p>

<pre><code>&lt;div class="parent"&gt;&lt;div&gt;&lt;div&gt;column 1&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div&gt;column 2&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
</code></pre>

<p><strong><em>Relevant css:</em></strong></p>

<pre><code>.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent&gt;div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent&gt;div&gt;div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}
</code></pre>

<p>This is slightly tricky, and the negative margin means that the "true" bottom of the columns is obscured.  This in turn means you can't position anything relative to the bottom of those columns because that's cut off by <code>overflow: hidden</code>.  Note that in addition to inline-blocks, you can achieve a similar effect with floats.</p>

<hr>

<p><strong>TL;DR</strong>: use <strong>flexbox</strong> if you can ignore IE9 and older; otherwise try a (css) table.  If neither of those options work for you, there are negative margin hacks, but these can cause weird display issues that are easy to miss during development, and there are layout limitations you need to be aware of.</p>


blocks|key|2838511|text|请将父目录设置为overflow:+hidden|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2838512|然后，在子div中，您可以为padding设置一个很大的值。例如|2838513|padding-bottom:+5000px|2838514|然后是margin-bottom:+-5000px|2838515|然后所有的子div都将是父div的高度。|2838516|当然，如果您试图将内容放入父div中(即放在其他div之外)，这将不起作用。|2838517|​|2838518|.parent{
++++border:+1px+solid+black;
++++overflow:+hidden;
++++height:+auto;
}
.child{
++++float:+left;
++++padding-bottom:+1500px;
++++margin-bottom:+-1500px;
}
.child1{
++++background:+red;
++++padding-right:+10px;++++
}
.child2{
++++background:+green;
++++padding-left:+10px;
}|code-block|syntax|javascript|2838519|<div+class="parent">
++++<div+class="child1+child">
++++++++One+line+text+in+child1
++++</div>
++++<div+class="child2+child">
++++++++Three+line+text+in+child2<br+/>
++++++++Three+line+text+in+child2<br+/>
++++++++Three+line+text+in+child2
++++</div>
</div>|2838520|2838521|示例：http://jsfiddle.net/Tareqdhk/DAFEC/|2838522|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Tareqdhk/DAFEC/^0|8|G|0|0|0|M|0|3|M|0|0|0|0|0|0|0|3|Z|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1C|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1J|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1K|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1L|8|@]|D|@]|E|$]]|$1|R|3|S|5|T|7|1M|8|@]|D|@]|E|$U|V]]|$1|W|3|X|5|T|7|1N|8|@]|D|@]|E|$U|V]]|$1|Y|3|Q|5|6|7|1O|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|1P|8|@]|D|@$9|1Q|A|1R|1|1S]]|E|$]]|$1|11|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18]]]]

<p>Please set parent div to <code>overflow: hidden</code><br>
then in child divs you can set a large amount for padding-bottom. for example<br>
<code>padding-bottom: 5000px</code><br>
then <code>margin-bottom: -5000px</code><br>
and then all child divs will be the height of the parent.<br>
Of course this wont work if you are trying to put content in the parent div (outside of other divs that is)  </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
    &lt;div class="child1 child"&gt;
        One line text in child1
    &lt;/div&gt;
    &lt;div class="child2 child"&gt;
        Three line text in child2&lt;br /&gt;
        Three line text in child2&lt;br /&gt;
        Three line text in child2
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
  </p>

<p>Example: <a href="http://jsfiddle.net/Tareqdhk/DAFEC/" rel="nofollow">http://jsfiddle.net/Tareqdhk/DAFEC/</a></p>


blocks|key|770803|text|我找到了很多答案，但对我来说最好的解决方案可能是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|770804|.parent+{+
++overflow:+hidden;+
}
.parent+.floatLeft+{
++#+your+other+styles
++float:+left;
++margin-bottom:+-99999px;
++padding-bottom:+99999px;
}|code-block|syntax|javascript|770805|您可以在此处查看其他解决方案http://css-tricks.com/fluid-width-equal-height-columns/|offset|length|770806|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/fluid-width-equal-height-columns/^0|0|0|E|1J|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>I found a lot of answers, but probably the best solution for me is </p>

<pre><code>.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}
</code></pre>

<p>You can check other solutions here <a href="http://css-tricks.com/fluid-width-equal-height-columns/">http://css-tricks.com/fluid-width-equal-height-columns/</a></p>


blocks|key|770826|text|对于父级：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|770827|display:+flex;|code-block|syntax|javascript|770828|对于孩子们：|770829|align-items:+stretch;|770830|你应该添加一些前缀，检查caniuse。|770831|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>For the parent:</p>

<pre><code>display: flex;
</code></pre>

<p>For children:</p>

<pre><code>align-items: stretch;
</code></pre>

<p>You should add some prefixes, check caniuse.</p>


blocks|key|4439305|text|我用它做了一个评论区：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4439306|​|4439307|.parent+{
++++display:+flex;
++++float:+left;
++++border-top:2px+solid+black;
++++width:635px;
++++margin:10px+0px+0px+0px;
++++padding:0px+20px+0px+20px;
++++background-color:+rgba(255,255,255,0.5);
}
++++
.child-left+{
	align-items:+stretch;
	float:+left;
	width:135px;
	padding:10px+10px+10px+0px;
	height:inherit;
	border-right:2px+solid+black;
}

.child-right+{
	align-items:+stretch;
	float:+left;
	width:468px;
	padding:10px;
}|code-block|syntax|javascript|4439308|<div+class="parent">
++<div+class="child-left">Short</div>
++<div+class="child-right">Tall<br>Tall</div>
</div>|4439309|4439310|你可以让孩子向右浮动，但在本例中，我精确地计算了每个div的宽度。|4439311|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>I used this for a comment section:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
    display: flex;
    float: left;
    border-top:2px solid black;
    width:635px;
    margin:10px 0px 0px 0px;
    padding:0px 20px 0px 20px;
    background-color: rgba(255,255,255,0.5);
}
    
.child-left {
	align-items: stretch;
	float: left;
	width:135px;
	padding:10px 10px 10px 0px;
	height:inherit;
	border-right:2px solid black;
}

.child-right {
	align-items: stretch;
	float: left;
	width:468px;
	padding:10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
  &lt;div class="child-left"&gt;Short&lt;/div&gt;
  &lt;div class="child-right"&gt;Tall&lt;br&gt;Tall&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>You could float the child-right to the right, but in this case I've calculated the widths of each div precisely.</p>


blocks|key|770901|text|如果你知道bootstrap，你可以通过使用'flex‘property.All很容易地做到这一点，你需要做的就是将下面的css属性传递给父div|type|unstyled|depth|inlineStyleRanges|entityRanges|data|770902|.homepageSection+{
++overflow:+hidden;
++height:+auto;
++display:+flex;
++flex-flow:+row;
}|code-block|syntax|javascript|770903|其中.homepageSection是我的父div。现在将您的html中的child+div添加为|offset|length|style|CODE|770904|<div+class="abc+col-md-6">
<div+class="abc+col-md-6">|770905|其中abc是我的孩子div.You可以检查两个孩子div中的高度相等，而不管边界如何，只需给子div|770906|entityMap^0|0|0|2|G|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>If you are aware of bootstrap you can do it easily by using 'flex' property.All you need to do is pass below css properties to parent div</p>

<pre><code>.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}
</code></pre>

<p>where <code>.homepageSection</code> is my parent div.
Now add child div in your html as</p>

<pre><code>&lt;div class="abc col-md-6"&gt;
&lt;div class="abc col-md-6"&gt;
</code></pre>

<p>where abc is my child div.You can check equality of height in both child div irrespective of border just by giving border to child div</p>


blocks|key|2838690|text|<div+class="parent"+style="height:500px;">
<div+class="child-left+floatLeft"+style="height:100%25">
</div>

<div+class="child-right+floatLeft"+style="height:100%25">
</div>
</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2838691|我使用内联风格只是为了给出想法。|unstyled|2838692|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;div class="parent" style="height:500px;"&gt;
&lt;div class="child-left floatLeft" style="height:100%"&gt;
&lt;/div&gt;

&lt;div class="child-right floatLeft" style="height:100%"&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I used inline style just to give idea. </p>


blocks|key|1738251|text|我在一次实习面试中学到了这个绝妙的技巧。最初的问题是，如何确保三列中每个顶部组件的高度与显示所有可用内容的高度相同。基本上创建一个不可见的子组件，它呈现最大可能的高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1738252|<div+class="parent">
++++<div+class="assert-height+invisible">
++++++++
++++</div>
++++<div+class="shown">
++++++++
++++</div>
</div>|code-block|syntax|javascript|1738253|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>I learned of this neat trick in an internship interview. The original question is how do you ensure the height of each top component in three columns have the same height that shows all the content available. Basically create a child component that is invisible that renders the maximum possible height.</p>

<pre><code>&lt;div class="parent"&gt;
    &lt;div class="assert-height invisible"&gt;
        &lt;!-- content --&gt;
    &lt;/div&gt;
    &lt;div class="shown"&gt;
        &lt;!-- content --&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|4439450|text|我可以看到，被接受的答案是使用position:+absolute;而不是float:+left。如果您希望使用具有以下结构的float:+left，|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4439451|<div+class="parent">
++++<div+class="child-left+floatLeft"></div>
++++<div+class="child-right+floatLeft"></div>
</div>|code-block|syntax|javascript|4439452|将position:+auto;赋予父对象，以便它将包含其子对象height。|4439453|.parent+{
++++position:+auto;
}
.floatLeft+{
++++float:+left
}|4439454|entityMap^0|F|J|11|B|1R|B|0|0|1|F|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|P|$]]

<p>I can see that the accepted answer uses <code>position: absolute;</code> instead of <code>float: left</code>. In case you want to use <code>float: left</code> with the following structure,</p>
<pre><code>&lt;div class=&quot;parent&quot;&gt;
    &lt;div class=&quot;child-left floatLeft&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;child-right floatLeft&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>Give <code>position: auto;</code> to the parent so that it will contain its children height.</p>
<pre><code>.parent {
    position: auto;
}
.floatLeft {
    float: left
}
</code></pre>


<p>I have the page structure as:</p>

<pre><code>&lt;div class="parent"&gt;
    &lt;div class="child-left floatLeft"&gt;
    &lt;/div&gt;

    &lt;div class="child-right floatLeft"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Now, the <code>child-left</code> DIV will have more content, so the <code>parent</code> DIV's height increases as per the child DIV. </p>

<p>But the problem is <code>child-right</code> height is not increasing. How can I make its height as equal to it's parent?</p>


How can I expand floated child div's height to parent's height?

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我的页面结构如下：<div class="parent">    <div class="child-left floatLeft">    </div>    <div class="child-right floatLeft">    </div></div>现在，child-left DIV将包含更多内容，因此p...

问如何将浮动的子div的高度扩展到父div的高度？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将浮动的子div的高度扩展到父div的高度？EN