html – 使div填充父的剩余空间

我需要一些帮助定位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>

我有以下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的宽度和高度是动态的.

我想要实现的是：

>使右div的高度等于左div的高度.
>使右边的宽度用类项填充div的其余部分.
>类底部的段落应该在右边的底部.

这是一个代表我目标的简单形象：

并链接到JSFiddle demo.

@R_404_323@

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

选项

浮动

如@joeellis所示,灵活宽度可以通过仅浮动左列,并将overflow：hidden应用于右列来实现.

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

HTML表和CSS表

可以通过给左边的单元格宽度为1px而不指定正确的单元格的宽度来实现灵活的宽度.两个细胞都会增长以适应内容.任何额外的空间将被添加到正确的单元格.

如果.bottom位于正确的表格单元格中,则在Firefox中无法实现该位置. Firefox中的表格单元格中的相对位置没有影响;绝对位置和100％的宽度不会相对于正确的表格单元格.

如果.bottom被视为右列中的单独表格单元格,那么右侧和底部表格单元格的正确高度在Firefox以外的浏览器中无法实现.表单元格的高度不一样,宽度相同(Firefox除外).

CSS3 flexBox和CSS3网格

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

概要

>浮动不提供任何浏览器的解决方案.
> HTML表和CSS tables不提供跨浏览器解决方案.
> Flexbox不提供IE9 or earlier的潜在解决方案(并可能或可能不提供其他浏览器的解决方案).
> Grids只提供了一个潜在的解决方案IE10(并可能或可能不提供解决方案).

结论

目前似乎没有足够的CSS解决方案,其中一个可以在足够的相关浏览器中运行,可能的例外是flexBox(如果不需要IE9及更早版本的支持).

jQuery的

这是一个几个修改的演示,使用jQuery强制列具有相同的高度.两个演示的CSS和jQuery是一样的. HTML仅在左列和右栏有多少内容.所有浏览器中的两个演示都可以正常测试.相同的基本方法可以用于纯JavaScript.

> Taller content on the left
> Taller content on the right

为了保持简单,我将左右div的内部填充移动到子元素(.content).

html – 使div填充父的剩余空间

@R_404_323@

猜你在找的HTML相关文章