如何以包装器的全高浮动元素？

Posted 2023-03-06

【中文标题】如何以包装器的全高浮动元素？

【英文标题】：How to float an element left with full height of the wrapper?

【发布时间】：2013-03-26 20:53:25

【问题描述】：

html：

<div class="wrapper">
    <div class="left">
        Foo
    </div>
    <div class="right">
        Text row 1
    </div>
</div>

<div class="wrapper">
    <div class="left">
        Foo Bar
    </div>
    <div class="right">
        Text row 1<br>
        Text row 2<br>
        Text row 3
    </div>
</div>

CSS：

.wrapper 
    overflow:hidden;


.left 
    width:80px;
    float:left;
    height:100%;

我怎样才能给浮动 div 包装器的完整高度（其高度是变化的）？

没有jQuery可以吗？

测试：http://jsfiddle.net/Q6B43/

【问题讨论】：

我实际上有同样的问题，我只设法用 jQuery 做到了。我很高兴知道是否有可能。

How to make a floated div 100% height of its parent?的可能重复

【参考方案1】：

添加：

body, html  height:100% 

并给你的包装一个固定的像素高度。

【参考方案2】：

display: table 解决方案

在表格中，一行的每个单元格都具有相同的高度。

.wrapper 
    display: table;
    width: 100%;

.left, .right 
    display: table-cell;

这是我认为最好的解决方案，但它是not compatible before IE8。

这是此解决方案的Fiddle。

使用绝对定位

绝对定位元素尊重其相对父级height：

.wrapper 
    position: relative;
    padding-left: 85px;

.left 
    position: absolute;
    left: 0;
    top: 0;

通常我会不在大多数情况下推荐绝对定位。但由于您有固定的width，也许没关系。但请注意，这将忽略 .left 中的长内容。高度只是由.right控制。

这是update to your Fiddle。

flexible 解决方案

这是太新了，我不建议现在使用它，但只是为了完整。你可以使用 CSS3 flex，但要注意browser compatibility：

.wrapper 
    display: flex;

Fiddle（在当前的 Chrome 和 Firefox 中测试）。

grid 布局

甚至比 flexbox 更新，CSS grid 接缝成为布局问题的完美答案。

.wrapper 
    display: grid;
    grid-template-areas: 'left right';


.left 
    grid-area: left;


.right 
    grid-area: right;

Browser compatibility 很少见，如果您返回查看版本。另外，我认为对于OP的场景来说有点过头了，但是对于未来更复杂的布局麻烦，这是一个非常强大的东西。

在Fiddle 中查看。

【讨论】：

元素具有固定宽度并不意味着绝对定位可以安全使用；导致问题的是元素的长度。

@cimmanon，我同意。这就是我发布替代方案的原因。但在给定的示例中，唯一的问题是右 <div/> 的内容。所以请让我梦想Martin随时都知道左边的内容是一行。 ;-) 在那种情况下，它会做我认为的工作。不是真的？

我无法想象在很多情况下，等高列的实例在其中一列中有单行的内容。如果是这样的话，那将是一个低效的布局。假设任一/任何一列都可能是较高的一列总是最安全的，因为这是最有可能发生的情况。

@cimmanon，好吧，我重新排序并修改了我的答案，并试图满足您的正确反对意见。

谢谢，解决方案在这里有效。表格和固定包装高度是不可能的。