Html CSS - 将浮动子 DIV 高度扩展到父级高度

Question

提问by Veera

I have the page structure as:

我的页面结构为：

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

Now, the child-leftDIV will have more content, so the parentDIV's height increases as per the child DIV.

现在，child-leftDIV 将包含更多内容，因此parentDIV 的高度会根据子 DIV 增加。

But the problem is child-rightheight is not increasing. How can I make its height as equal to it's parent?

但问题是child-right高度没有增加。我怎样才能使它的高度等于它的父级？

Answer 1

回答by Sotiris

For the parentelement, add the following properties:

对于parent元素，添加以下属性：

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

then for .child-rightthese:

那么对于.child-right这些：

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Find more detailed results with CSS examples hereand more information about equal height columns here.

找到CSS的例子更详细的结果在这里和大约等于身高列的详细信息在这里。

Answer 2

回答by Eamon Nerbonne

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:

此问题的常见解决方案是使用绝对定位或裁剪浮点数，但这些方法很棘手，因为如果您的列数 + 大小发生变化，它们需要大量调整，并且您需要确保“主”列始终是最长的。相反，我建议您使用三个更强大的解决方案之一：

display: flex: by far the simplest & best solutionand very flexible - but unsupported by IE9 and older.
tableor display: table: very simple, very compatible (pretty much every browser ever), quite flexible.
display: inline-block; width:50%with a negative margin hack: quite simple, but column-bottom borders are a little tricky.

display: flex：迄今为止最简单和最好的解决方案，而且非常灵活——但不受 IE9 及更早版本的支持。
table或display: table：非常简单，非常兼容（几乎所有浏览器），非常灵活。
display: inline-block; width:50%使用负边距 hack：非常简单，但列底边框有点棘手。

1. `display:flex`

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).

这真的很简单，而且很容易适应更复杂或更详细的布局——但只有 IE10 或更高版本才支持 flexbox（除了其他现代浏览器）。

Example:http://output.jsbin.com/hetunujuma/1

示例：http ://output.jsbin.com/hetunujuma/1

Relevant html:

相关html：

<div class="parent"><div>column 1</div><div>column 2</div></div>

Relevant css:

相关css：

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

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

Flexbox 支持更多选项，但只要有任意数量的列就足够了！

2.`<table>`or `display: table`

2.`<table>`或`display: table`

A simple & extremely compatible way to do this is to use a table- I'd recommend you try that first if you need old-IE support. 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 tableelement, consider css display: table(unsupported by IE7 and older).

一个简单且极其兼容的方法是使用 a table-如果您需要旧的 IE 支持，我建议您先尝试。您正在处理列；divs + floats 根本不是最好的方法（更不用说多级嵌套 divs 只是为了绕过 css 限制这一事实比仅仅使用一个简单的表格更“语义”）。如果您不想使用该table元素，请考虑使用 cssdisplay: table（IE7 及更早版本不支持）。

Example:http://jsfiddle.net/emn13/7FFp3/

示例：http ://jsfiddle.net/emn13/7FFp3/

Relevant html:(but consider using a plain <table>instead)

相关的 html：（但考虑使用普通的<table>）

<div class="parent"><div>column 1</div><div>column 2</div></div>

Relevant css:

相关css：

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

This approach is far more robust than using overflow:hiddenwith floats. You can add pretty much any number of columns; you can have them auto-scaleif you want; and you retain compatibility with ancient browsers. Unlike the float solution requires, you also don't need to know beforehandwhich column is longest; the height scales just fine.

这种方法比使用overflow:hidden浮点数要健壮得多。您几乎可以添加任意数量的列；如果需要，您可以让它们自动缩放；并且您保留与旧浏览器的兼容性。与浮动解决方案所要求的不同，您也不需要事先知道哪一列最长；身高比例刚刚好。

KISS: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.

KISS：除非你特别需要，否则不要使用浮动黑客。如果 IE7 是一个问题，我仍然会选择一个带有语义列的普通表格，而不是一个难以维护、不太灵活的技巧 CSS 解决方案。

By the way, if you need your layout to be responsive (e.g. no columns on small mobile phones) you can use a @mediaquery to fall back to plain block layout for small screen widths - this works whether you use <table>or any other display: tableelement.

顺便说一句，如果您需要您的布局具有响应性（例如，小型手机上没有列），您可以使用@media查询返回到小屏幕宽度的普通块布局 - 无论您使用<table>或任何其他display: table元素，这都有效。

3. `display:inline block`with a negative margin hack.

3.`display:inline block`负利润率黑客。

Another alternative is to use display:inline block.

另一种选择是使用display:inline block.

Example:http://jsbin.com/ovuqes/2/edit

示例：http ://jsbin.com/ovuqes/2/edit

Relevant html:(the absence of spaces between the divtags is significant!)

相关html：（div标签之间没有空格很重要！）

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

Relevant css:

相关css：

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

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

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

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 overflow: hidden. Note that in addition to inline-blocks, you can achieve a similar effect with floats.

这有点棘手，负边距意味着列的“真实”底部被遮挡。这反过来意味着你不能相对于这些列的底部定位任何东西，因为它被overflow: hidden. 请注意，除了内联块之外，您还可以使用浮点数实现类似的效果。

TL;DR: use flexboxif 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.

TL;DR：如果可以忽略 IE9 及更早版本，请使用flexbox；否则尝试（css）表。如果这些选项都不适合您，则存在负边距问题，但这些可能会导致在开发过程中容易错过的奇怪显示问题，并且您需要注意布局限制。

Answer 3

回答by Aiphee

For the parent:

对于家长：

display: flex;

For children:

为孩子：

align-items: stretch;

You should add some prefixes, check caniuse.

您应该添加一些前缀，检查 caniuse。

Answer 4

回答by Dobromir Minchev

I found a lot of answers, but probably the best solution for me is

我找到了很多答案，但对我来说最好的解决方案可能是

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

You can check other solutions here http://css-tricks.com/fluid-width-equal-height-columns/

您可以在此处查看其他解决方案http://css-tricks.com/fluid-width-equal-height-columns/

Answer 5

回答by Tareq

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

请将父 div 设置为overflow: hidden
然后在子 div 中您可以为 padding-bottom 设置大量。例如
padding-bottom: 5000px
thenmargin-bottom: -5000px
然后所有子 div 将是父级的高度。
当然，如果您尝试将内容放在父 div 中（在其他 div 之外），这将不起作用

.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;
}

<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>

Example: http://jsfiddle.net/Tareqdhk/DAFEC/

示例：http: //jsfiddle.net/Tareqdhk/DAFEC/

Answer 6

回答by Olical

Does the parent have a height? If you set the parents height like so.

父母有身高吗？如果你像这样设置父母的高度。

div.parent { height: 300px };

Then you can make the child stretch to the full height like this.

然后你可以让孩子像这样伸展到全高。

div.child-right { height: 100% };

EDIT

编辑

Here is how you would do it using JavaScript.

以下是您将如何使用 JavaScript 进行操作。

Answer 7

回答by Salman A

CSS table display is ideal for this:

CSS 表格显示非常适合：

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Original answer (assumed any column could be taller):

原始答案（假设任何列都可以更高）：

You're trying to make the parent's height dependent on the children's height and children's height dependent on parent's height. Won't compute. CSS Faux columns is the best solution. There's more than one way of doing that. I'd rather not use JavaScript.

你试图让父母的身高取决于孩子的身高，而孩子的身高取决于父母的身高。不会计算。CSS 仿列是最好的解决方案。有不止一种方法可以做到这一点。我宁愿不使用 JavaScript。

Answer 8

回答by ajcw

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:

我最近使用 jQuery 在我的网站上完成了这项工作。该代码计算最高 div 的高度并将其他 div 设置为相同的高度。这是技术：

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

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

我不相信height:100%会起作用，所以如果您不明确知道 div 高度，我认为没有纯 CSS 解决方案。

Answer 9

回答by larsgrafik

I used this for a comment section:

我将其用于评论部分：

.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;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

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

您可以将 child-right 向右浮动，但在这种情况下，我已经精确计算了每个 div 的宽度。

Answer 10

回答by Naved Ali

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

如果您知道引导程序，您可以使用“flex”属性轻松完成。您需要做的就是将下面的 css 属性传递给父 div

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

where .homepageSectionis my parent div. Now add child div in your html as

.homepageSection我的父 div在哪里。现在在你的html中添加子div

<div class="abc col-md-6">
<div class="abc col-md-6">

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

其中 abc 是我的孩子 div。您可以通过为孩子 div 提供边框来检查两个孩子 div 中的高度是否相等，而无需考虑边框

Html CSS - 将浮动子 DIV 高度扩展到父级高度

提问by Veera

回答by Sotiris

回答by Eamon Nerbonne

1. `display:flex`

1. `display:flex`

2.`<table>`or `display: table`

2.`<table>`或`display: table`

3. `display:inline block`with a negative margin hack.

3.`display:inline block`负利润率黑客。

回答by Aiphee

回答by Dobromir Minchev

回答by Tareq

回答by Olical

回答by Salman A

回答by ajcw

回答by larsgrafik

回答by Naved Ali

相关推荐

最近更新

标签

Html CSS - 将浮动子 DIV 高度扩展到父级高度

提问by Veera

回答by Sotiris

回答by Eamon Nerbonne

1. display:flex

1. display:flex

2.<table>or display: table

2.<table>或display: table

3. display:inline blockwith a negative margin hack.

3.display:inline block负利润率黑客。

回答by Aiphee

回答by Dobromir Minchev

回答by Tareq

回答by Olical

回答by Salman A

回答by ajcw

回答by larsgrafik

回答by Naved Ali

相关推荐

Html 如何在 CSS 中将 span 元素居中？

什么是默认的 HTML/CSS 链接颜色？

Html 我需要一个客户端浏览器数据库。我有哪些选择

Html 按中心点定位，而不是左上点

相关推荐

最近更新

标签

1. `display:flex`

1. `display:flex`

2.`<table>`or `display: table`

2.`<table>`或`display: table`

3. `display:inline block`with a negative margin hack.

3.`display:inline block`负利润率黑客。