使div填充父级的剩余空间

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.

使右div的高度等于左div的高度。

2. Make the width of the right div fill the rest of the div with class item.

使右侧div的宽度用类项填充div的其余部分。

3. The paragraph with class bottom should be at the bottom of the right div.

具有类底部的段落应位于右侧div的底部。

Here is a simple image that represents my goal:

这是一个代表我目标的简单图像:

And a link to a JSFiddle demo.

以及JSFiddle演示的链接。

4 个解决方案

#1

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

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

Options

1. Floats

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

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

The position of .bottom cannot be achieved in any browser. There's no CSS solution for floated columns with equal, variable height. An absolutely positioned .bottom element 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 .bottom with bottom:0 won't necessarily place it at the bottom of the container.

无法在任何浏览器中实现.bottom的位置。对于具有相同,可变高度的浮动柱,没有CSS解决方案。绝对定位的.bottom元素必须位于右列div内,因此100%宽度将使其具有正确的大小。但由于右列不一定与左列一样高,因此底部定位.bottom: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 .bottom is 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 .bottom is 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.

Floats不为任何浏览器提供解决方案。

• HTML tables and CSS tables don't offer a cross-browser solution.

HTML表和CSS表不提供跨浏览器解决方案。

• Flexbox doesn't offer a potential solution for IE9 or earlier (and may or may not offer a solution to other browsers).

Flexbox不为IE9或更早版本提供潜在的解决方案(可能会也可能不会为其他浏览器提供解决方案)。

• Grids only offer a potential solution to IE10 (and may or may not offer a solution there).

网格只为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

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

#2

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

通过将它们显示为表格单元格并将父级显示为display:table,可以实现相同高度和保持在同一行的同级元素。工作小提琴:http://jsfiddle.net/SgubR/2/(它还显示溢出:隐藏沿浮动元素技术创建列。后者需要一个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等),其语义与用于表格布局的表格,tr和td元素无关(除了视觉效果相同,这就是什么我们想要)。

• display: table is set on a parent

display:table在父级上设置

• display: table-row may be used on an element in-between but if it works without it, fine

display:table-row可以在中间的元素上使用,但如果没有它就可以使用,很好

• display: table-cell is set on each child

display:在每个子节点上设置table-cell

• 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: fixed will tell browsers to switch to the other table layout algorithm where they don't care about the quantity of content, only to widths set by CSS

table-layout:fixed会告诉浏览器切换到其他表布局算法,他们不关心内容的数量,只关注CSS设置的宽度

• vertical-align: top will be needed in most cases (but you may set other values, great for complex layouts)

vertical-align:在大多数情况下都需要top(但你可以设置其他值,非常适合复杂的布局)

• margins aren't applied on "cells", only padding. Margins only apply on table itself. Though you still can separate "cells" with border-collapse: separate and/or border-spacing: 4px 6px

边距不适用于“单元格”,仅适用于填充。边距仅适用于桌子本身。虽然您仍然可以将“单元格”与边框折叠分开:单独和/或边框间距: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: here and there with also the good old method of faux-columns (your design must be thought with this technique in mind)

在以前的答案中有更长的解释:这里和那里还有古老的人造柱方法(你的设计必须考虑到这种技术)

#3

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

只需向右列添加一个oveflow,不要浮动它。

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

This will make right to fill the rest of the width.

这将填补剩余的宽度。

#4

Something like this might work:

这样的事情可能有用:

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)

然而,他们的高度并没有完全联系在一起;在这个例子中,你的左侧方块的高度仍然需要手动设置(因为它是一个浮动的容器)