blocks|key|5478730|text|您的问题的解决方案是:首先，您必须为父div提供一个height，然后设置子div的高度，将#first设置为min-height:+100%25，代码如下：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5478731|#main+{
overflow:hidden;
border:1px+solid+black;
height:+400px;
}
#first+{
border:1px+solid+black;
width:200px;
float:left;
min-height:+100%25;
}|code-block|syntax|javascript|5478732|entityMap^0|J|3|Q|6|12|3|1A|6|1J|G|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$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|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|L|$]]

The solution for your problem is: first you have to give a <code>height</code> to the parent <code>div</code> and then set the height of the child, <code>#first</code> to <code>min-height: 100%</code>, the code would be like this:

<pre><code>#main {
overflow:hidden;
border:1px solid black;
height: 400px;
}
#first {
border:1px solid black;
width:200px;
float:left;
min-height: 100%;
}
</code></pre>

blocks|key|1270434|text|您可以使用应用于#main容器的display:+table;，以及应用于#first和#second的display:table-row;和display:table-cell;，以使第一个子容器采用其兄弟容器#second的高度。请记住添加overflow:auto;以允许第一个容器将其高度扩展到底部。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1270435|CSS|BOLD|1270436|#main{
++++overflow:hidden;
++++border:1px+solid+black;
++++display:table;
++++width:100%25;
}
#first{
++++border:1px+solid+black;
++++width:200px;
++++float:left;
++++display:table-row;
++++overflow:auto;
++++height:100%25;+++
}
a{
++++display:block;
++++padding:10px;
}
#second{
++++border:1px+solid+black;
++++overflow:hidden;
++++height:400px;
++++display:table-cell;
++++width:100%25;
}|code-block|syntax|javascript|1270437|演示http://jsfiddle.net/a_incarnati/djobkh7t/7/|1270438|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/a_incarnati/djobkh7t/7/^0|G|F|1G|I|1Z|J|3E|E|0|0|3|0|0|2|17|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]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|19|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|P|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

You can use <code>display: table;</code> applied to the #main container and <code>display:table-row;</code> and <code>display:table-cell;</code> applied to #first and #second to make the first child container take the height of its sibling container #second. Remember to add <code>overflow:auto;</code> to allow the first container to make it expand its height until the bottom.

CSS

<pre><code>#main{
 overflow:hidden;
 border:1px solid black;
 display:table;
 width:100%;
}
#first{
 border:1px solid black;
 width:200px;
 float:left;
 display:table-row;
 overflow:auto;
 height:100%; 
}
a{
 display:block;
 padding:10px;
}
#second{
 border:1px solid black;
 overflow:hidden;
 height:400px;
 display:table-cell;
 width:100%;
}
</code></pre>

DEMO <a href="http://jsfiddle.net/a_incarnati/djobkh7t/7/" rel="nofollow">http://jsfiddle.net/a_incarnati/djobkh7t/7/</a>

blocks|key|1170769|text|我已经删除了浮点数，并更改了div上的显示类型来解决这个问题。参见示例CSS+%2B+fiddle：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1170770|#main{
border:+1px+solid+black;
display:+table;
width:+500px;
}
#first{
border:+1px+solid+black;
width:+25%25;
display:+table-cell;
}
#second{
border:+1px+solid+black;
width:+75%25;
display:+table-cell;
}|code-block|syntax|javascript|1170771|http://jsfiddle.net/djobkh7t/13/|offset|length|1170772|可以在父div上设置“table”的显示类型，然后在子div上设置“table-cell”的显示类型。|1170773|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|W|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@$I|W|J|X|1|Y]]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|H]]]]

I've removed the floats and changed the display types on your divs to fix the problem. See example CSS + fiddle:

<pre><code>#main{
border: 1px solid black;
display: table;
width: 500px;
}
#first{
border: 1px solid black;
width: 25%;
display: table-cell;
}
#second{
border: 1px solid black;
width: 75%;
display: table-cell;
}
</code></pre>

<a href="http://jsfiddle.net/djobkh7t/13/" rel="nofollow">http://jsfiddle.net/djobkh7t/13/</a>

You can set the display type of 'table' on the parent div, then 'table-cell' on the child div's.

I have two divs inside a div. One of the two is floated to the left and it has some links in it. It has a width of 200px The second of the two has a value of overflow:hidden and it has a width of rest to the right. It has some content in it which makes its height longer than first div. 

I want first div to expand to parent's or the second div's height according to the increment of the second div's height

<pre><code>&lt;div id ="main"&gt;
 &lt;div id ="first"&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt;
 &lt;/div&gt;
 &lt;div id ="second"&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt;
 &lt;a href="#"&gt;Link&lt;/a&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

.

<pre><code>#main{
 overflow:hidden;
 border:1px solid black;
}
#first{
 border:1px solid black;
 width:200px;
 float:left;
}

a{
 display:block;
 padding:10px;
}
#second{
 border:1px solid black;
 overflow:hidden;
}
</code></pre>

<a href="http://jsfiddle.net/djobkh7t/9/" rel="nofollow">JSFiddle</a>

How to expand floated child div to its parent's height

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我在一个div中有两个div。其中一个漂浮在左边，里面有一些链接。它的宽度为200px，两个元素中的第二个元素的值为overflow:hidden，右边的宽度为rest。它包含一些内容，这使得它的高度比第一个div更长。我希望第一个div根据第二个div高度的增量扩展到父div或第二个div的高度<div id ="m...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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