您的位置: 首页  >  技术问答  >  使div填充父项的剩余空间

使div填充父项的剩余空间

分类: 技术问答 • 2022-07-24 18:16:10
问题描述：

我需要一些帮助定位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的内部填充移动到子元素c $ c> .content ）。

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

相关推荐