使div填充父级的剩余空间 [英] Make div fill remaining space of parent

问题描述

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

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

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

我有以下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;
}

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

The width and height of the left div is dynamic.

我想实现的是：

1. 使右侧div的高度等于


2. 使用 item 将右侧div的宽度填充到div的剩余部分。


3. bottom 的段落应该在右侧div的底部。

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 bottom should be at the bottom of the right div.

这是一个代表我的目标的简单图片：

Here is a simple image that represents my goal:

以及指向 JSFiddle演示的链接

推荐答案

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

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

1。浮动

如@joeellis所示，灵活的宽度可以通过只浮动左列，并应用 overflow：hidden 到右栏。

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

.bottom 的位置无法在任何浏览器。对于具有相等，可变高度的浮动列，没有CSS解决方案。绝对定位的 .bottom 元素必须在右侧列div内，因此100％的宽度会给它正确的大小。但是由于右列不一定和左列一样高，因此 .bottom 与 bottom：0 不一定会将其放在容器的底部。

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.

2。 HTML表和CSS表

灵活宽度可以通过给左单元格赋予1px的宽度，而不是指定右单元格的宽度来实现。两个单元都将增长以适应内容。

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.

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

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除外）。

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

3。 CSS3 flexbox和CSS3网格

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

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.

• 浮动广告不会为任何浏览器提供解决方案。


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


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


• 网格仅提供了 IE10 （可能或可能不会在那里提供解决方案）。

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

目前没有一个足够的CSS解决方案，一个将工作在足够的相关浏览器，可能的例外flexbox（如果支持IE9和更早的不是需要）。

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

这里有一对修改的演示，使用jQuery强制列高度。两个演示的CSS和jQuery是相同的。 HTML仅根据左侧和右侧列中的内容有所不同。两个演示在所有浏览器中测试正常。相同的基本方法可用于纯JavaScript。

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.

• 左侧较高的内容


• 右侧较高的内容

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

为了简单起见，我移动了左边的内部填充和右div到一个子元素（ .content ）。

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

这篇关于使div填充父级的剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！