CSS 如何在包装器的全高处浮动元素?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15817019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 22:19:23  来源:igfitidea点击:

How to float an element left with full height of the wrapper?

csscss-floatfloating

提问by Martin

HTML:

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:

CSS:

.wrapper {
    overflow:hidden;
}

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

How can I give the floating div the full height of the wrapper (whose height is varying)?

如何为浮动 div 提供包装器的完整高度(其高度不同)?

is it possible without jQuery?

没有jQuery有可能吗?

Test: http://jsfiddle.net/Q6B43/

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

回答by Linus Caldwell

The display: tablesolution

display: table解决方案

Within tables each cell of a row has the same height.

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

.wrapper {
    display: table;
    width: 100%;
}
.left, .right {
    display: table-cell;
}

This is the best solution in my opinion, but is not compatible before IE8.

这是我认为最好的解决方案,但在 IE8 之前不兼容

Here is the Fiddlefor this solution.

这是此解决方案的小提琴

Using absolute positioning

使用绝对定位

Absolute positioned elements respect their relative parents height:

绝对定位元素尊重它们的相对父元素height

.wrapper {
    position: relative;
    padding-left: 85px;
}
.left {
    position: absolute;
    left: 0;
    top: 0;
}

Normally I would notrecommend absolute positioning in most situations. But as you have a fixed widthanyway, maybeit does not matter. But be aware of the fact that this will ignore long contents in .left. The height is just controlled by .right.

通常在大多数情况下我不会推荐绝对定位。但既然你有一个固定的width无论如何,也许这并不重要。但请注意,这将忽略.left. 高度仅由 控制.right

Here is an update to your Fiddle.

这是您的 Fiddle更新

The flexible solution

flexIBLE解决方案

This is so new I would not recommend using it right now, but just to be complete.You could use CSS3 flex, but be aware of browser compatibility:

这是如此新,我不建议现在使用它,但只是为了完整。您可以使用 CSS3 flex,但要注意浏览器兼容性

.wrapper {
    display: flex;
}

The Fiddle(tested in current Chrome and Firefox).

The Fiddle(在当前的 Chrome 和 Firefox 中测试)。

The gridlayout

grid布局

Even newer than flexbox, CSS gridseams to be the perfect answer for layout questions.

甚至比 flexbox 更新,CSSgrid接缝是布局问题的完美答案。

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

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

Browser compatibilityis rare, if you go back a view versions. Besides, it would be overkill for the OP's scenario in my opinion, but for more complex layout troubles in the future, this is a very powerful thing.

浏览器兼容性很少见,如果您返回查看版本。另外,在我看来,这对于OP的场景来说有点矫枉过正,但对于未来更复杂的布局麻烦,这是一个非常强大的东西。

See it in the Fiddle.

Fiddle 中看到它。

回答by Diodeus - James MacFarlane

Add:

添加:

body, html { height:100% }

And give your wrapper a fixed height in pixels.

并为您的包装器提供以像素为单位的固定高度。