Html 使 div 填充父级的剩余空间

Make div fill remaining space of parent

提问by user1292810

I need some help with positioning divs. The HTML structure is as follows:

我需要一些定位 div 的帮助。HTML结构如下：

<div class="container">
    <div class="item">
        <div class="left">
            lorem lorem
        </div>
        <div class="right">
            <p>right</p>
            <p class="bottom">bottom</p>
        </div>
    </div>
</div>

And I have the following CSS:

我有以下 CSS：

.container {
    float: left;
    padding: 15px;
    width: 600px;
}
.item {
    float: left;
    padding: 15px;
    width: 570px;
}
.left {
    float: left;
    padding: 40px 20px;
    margin-right: 10px;
}
.right {
    position: relative;
    float: left;
}
.bottom {
    position: absolute;
    bottom: 0;
}

The width and height of the left div is dynamic.

左侧 div 的宽度和高度是动态的。

What I want to achieve is:

我想要实现的是：

1. Make the height of the right div equal to height of the left div.
2. Make the width of the right div fill the rest of the div with class item.
3. The paragraph with class bottomshould be at the bottom of the right div.

1. 使右侧 div 的高度等于左侧 div 的高度。
2. 使用 class 使右侧 div 的宽度填充 div 的其余部分item。
3. 带有类的段落bottom应位于右侧 div 的底部。

Here is a simple image that represents my goal:

这是一个简单的图像，代表了我的目标：

And a link to a JSFiddle demo.

以及指向JSFiddle 演示的链接。

采纳答案by Matt Coughlin

Getting the correct position and width of .bottomappears to be the biggest hurdle for a cross-browser, CSS solution.

获得正确的位置和宽度.bottom似乎是跨浏览器 CSS 解决方案的最大障碍。

Options

选项

1. Floats

1. 漂浮物

As @joeellis demonstrated, the flexible widths can be achieved by floating only the left column, and applying overflow:hiddento the right column.

正如@joeellis 所展示的，可以通过仅浮动左列并应用于overflow:hidden右列来实现灵活的宽度。

The position of .bottomcannot be achieved in any browser. There's no CSS solution for floated columns with equal, variable height. An absolutely positioned .bottomelement must be inside the right column div, so that 100% width would give it the correct size. But since the right column won't necessarily be as tall as the left column, positioning .bottomwith bottom:0won't necessarily place it at the bottom of the container.

的位置.bottom在任何浏览器中都无法实现。对于具有相等、可变高度的浮动列，没有 CSS 解决方案。绝对定位的.bottom元素必须位于右列 div 内，这样 100% 的宽度才能为其提供正确的大小。但由于右列不一定与左列一样高，定位.bottomwithbottom:0不一定将其放在容器的底部。

2. HTML tables and CSS tables

2. HTML 表格和 CSS 表格

The flexible widths can be achieved by giving the left cell a width of 1px and not specifying a width for the right cell. Both cells will grow to fit the content. Any extra space will be added to the right cell alone.

灵活的宽度可以通过为左侧单元格指定 1px 的宽度而不指定右侧单元格的宽度来实现。两个单元格都将增长以适应内容。任何额外的空间都将单独添加到正确的单元格中。

If .bottomis inside the right table cell, the position can't be achieved in Firefox. Relative position has no effect in a table cell in Firefox; absolute position and 100% width would not be relative to the right table cell.

如果.bottom在右侧表格单元格内，则在 Firefox 中无法实现该位置。相对位置在 Firefox 中的表格单元格中无效；绝对位置和 100% 宽度不会相对于右侧表格单元格。

If .bottomis treated as a separate table cell in the right column, the correct heights of the right and bottom table cells cannot be achieved in any browser other than Firefox. Table cells aren't flexible in height the same way they are in width (except in Firefox).

如果.bottom在右列中将其视为单独的表格单元格，则在 Firefox 以外的任何浏览器中都无法实现右下方表格单元格的正确高度。表格单元格的高度与宽度不同（Firefox 除外）。

3. CSS3 flexbox and CSS3 grids

3. CSS3 flexbox 和 CSS3 网格

Flexbox and grids are the promising layout tools of the near future. But flexbox isn't supported by IE9 or earlier, and grids aren't supported by any browser other than IE10. Haven't tested if either can achieve this layout, but browser support may prevent them from being an option at present.

Flexbox 和网格是不久的将来很有前途的布局工具。但是 IE9 或更早版本不支持 flexbox，IE10 以外的任何浏览器都不支持网格。尚未测试是否可以实现此布局，但浏览器支持可能阻止它们成为目前的选项。

Summary

概括

• Floats don't offer a solution for any browser.
• HTML tables and CSS tablesdon't offer a cross-browser solution.
• Flexboxdoesn't offer a potential solution for IE9 or earlier(and may or may not offer a solution to other browsers).
• Gridsonly offer a potential solution to IE10(and may or may not offer a solution there).

• 浮动不为任何浏览器提供解决方案。
• HTML 表和CSS 表不提供跨浏览器的解决方案。
• Flexbox不为IE9 或更早版本提供潜在的解决方案（并且可能会或可能不会为其他浏览器提供解决方案）。
• 网格只为IE10提供了一个潜在的解决方案（并且可能会也可能不会在那里提供解决方案）。

Conclusion

结论

There doesn't appear to be an adequate CSS solution at present, one that would work in enough relevant browsers, with the possible exception of flexbox (if support for IE9 and earlier isn't required).

目前似乎没有足够的 CSS 解决方案，可以在足够多的相关浏览器中工作，除了 flexbox（如果不需要支持 IE9 及更早版本）。

jQuery

jQuery

Here's a couple modified demos that use jQuery to force the columns to have the same height. The CSS and jQuery for both demos is the same. The HTML only differs by how much content is in the left and right column. Both demos tested fine in all browsers. The same basic approach could be used for plain JavaScript.

这里有几个修改过的演示，它们使用 jQuery 强制列具有相同的高度。两个演示的 CSS 和 jQuery 是相同的。HTML 的区别仅在于左列和右列中有多少内容。两个演示在所有浏览器中都测试良好。相同的基本方法可用于纯 JavaScript。

• Taller content on the left
• Taller content on the right

• 左侧较高的内容
• 右侧较高的内容

To keep things simple, I moved the internal padding for the left and right div to a child element (.content).

为了简单起见，我将左右 div 的内部填充移动到子元素 ( .content)。

回答by FelipeAls

Sibling elements of same height and staying on the same row can be achieved by displaying them as table-celland parent as display: table.
Working fiddle: http://jsfiddle.net/SgubR/2/(which also display the overflow: hiddenalong a floating elementtechnique for creating a column. The latter needs a clearfix)

可以通过将它们显示为table-cell和父元素来实现相同高度并保持在同一行的兄弟元素display: table。
工作小提琴：http: //jsfiddle.net/SgubR/2/（它还显示了用于创建列overflow: hidden的浮动元素技术。后者需要一个clearfix）

Table-cell in CSS uses any HTML element you want (section, div, span, li, whatever), its semantics is unrelated to table, tr and td elements used for table layout (except that the visual result is the same, that's what we want).

CSS 中的表格单元格使用任何你想要的 HTML 元素（section、div、span、li 等等），它的语义与用于表格布局的 table、tr 和 td 元素无关（除了视觉效果是一样的，就是这样）我们想要）。

• display: tableis set on a parent
• display: table-rowmay be used on an element in-between but if it works without it, fine
• display: table-cellis set on each child
• a width is set on none, some or all these "cells". Browser will adapt both to content and widths set in order to calculate their widths (and total width of parent, obviously)
• table-layout: fixedwill tell browsers to switch to the othertable layout algorithm where they don't care about the quantity of content, only to widths set by CSS
• vertical-align: topwill be needed in most cases (but you may set other values, great for complex layouts)
• margins aren't applied on "cells", only padding. Margins only apply on table itself. Though you still can separate "cells" with border-collapse: separateand/or border-spacing: 4px 6px

• display: table设置在父级上
• display: table-row可以在中间的元素上使用，但如果没有它也可以工作，很好
• display: table-cell设置在每个孩子身上
• 在无、部分或所有这些“单元格”上设置宽度。浏览器将适应设置的内容和宽度以计算它们的宽度（显然是父级的总宽度）
• table-layout: fixed将告诉浏览器切换到其他表格布局算法，他们不关心内容的数量，只关心由 CSS 设置的宽度
• vertical-align: top大多数情况下都需要（但您可以设置其他值，非常适合复杂的布局）
• 边距不适用于“单元格”，仅适用于填充。边距仅适用于表格本身。尽管您仍然可以使用border-collapse: separate和/或分隔“单元格”border-spacing: 4px 6px

Compatibility: IE8+
Fallback for IE6/7 if needed is exactly the same as for inline-block

兼容性：
如果需要，IE6/7 的IE8+回退与内联块完全相同

Longer explanations in previous answers: hereand therewith also the good old method of faux-columns(your design must be thought with this technique in mind)

先前答案中的更长解释：这里和那里还有人造柱的旧方法（您的设计必须考虑到这种技术）

回答by pzin

Just add an oveflowto the right column and don't float it.

只需oveflow在右列添加一个，不要浮动它。

.right {
  position: relative;
  overflow: hidden;
}

This will make rightto fill the rest of the width.

这将使right填充宽度的其余部分。

回答by joeellis

Something like this might work:

像这样的事情可能会奏效：

http://jsfiddle.net/PCvy9/2/

http://jsfiddle.net/PCvy9/2/

The main key of what you're looking for lines in the:

您正在寻找的行的主要关键在于：

 .right {
   overflow: hidden;
   background-color: #C82927;
 }

This is due to something called the "block formatting context." Great reasoning and tutorial as to why here: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

这是由于所谓的“块格式上下文”。关于为什么在这里的很好的推理和教程：http: //colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

However, their heights are not completely linked; in this example, your left side block's height would still need to be manually set (as it's a floated container)

然而，他们的身高并不完全相关。在这个例子中，你的左侧块的高度仍然需要手动设置（因为它是一个浮动容器）