如何将外部 div 的高度设置为始终等于特定的内部 div?

本文介绍了如何将外部 div 的高度设置为始终等于特定的内部 div?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个包含三个内部 div 的外部 div.

我希望最左边的内部 div 始终确定外部 div 的高度.如果其他内部 div 的内容 [比最左边的 div] 少，它们将有空白空间.如果他们有更多的内容[比最左边的 div]，他们会得到一个滚动条.

关于 SO 的一些其他问题询问将外部 div 的高度设置为 内部 div 的高度.但是，在我的情况下，我有多个内部 div，并且我不知道外部 div 的高度大于或小于最左侧 div 的高度.

有什么办法可以做到这一点，尤其是只使用 CSS 吗?

解决方案

一个想法是使用绝对位置使一些内容脱离流，这样它不会对高度产生任何影响，然后使用 flexbox主要布局:

.container {显示:弹性；边框:1px 实心；填充:5px；box-sizing: 边框框；}.container>div {弹性:1；边距:5px；边框:1px 实心；box-sizing: 边框框；}div.inner {边框颜色:红色；}.inner-alt {位置:相对；溢出:自动；}.inner-alt>div {位置:绝对；顶部:0；右:0；左:0；底部:0；}

<div class="inner">Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Donec dignissim ipsum orci, </div><div class="inner-alt"><div>ut volutpat ligula finibus a.Maecenas ut pharetra 前.Nunc volutpat est eu odio 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="inner-alt"><div>eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="容器"><div class="inner">Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Donec dignissim ipsum orci，io 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate</div><div class="inner-alt"><div>ut volutpat ligula finibus a.Maecenas ut pharetra 前.Nunc volutpat est eu odio 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="inner-alt"><div>eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="容器"><div class="inner">Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Donec dignissim ipsum orci，io 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate</div><div class="inner-alt"><div>ut volutpat ligula finibus a.Maecenas ut pharetra 前.Nunc volutpat est eu odio 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="inner-alt"><div>eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

这是使用 height:0;min-height:100%

的另一个技巧

.container {显示:弹性；边框:1px 实心；填充:5px；box-sizing: 边框框；}.container>div {弹性:1；边距:5px；边框:1px 实心；box-sizing: 边框框；}div.inner {边框颜色:红色；}.inner-alt {位置:相对；溢出:自动；}.inner-alt>div {高度:0；最小高度:100%；}

<div class="inner">Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Donec dignissim ipsum orci, </div><div class="inner-alt"><div>ut volutpat ligula finibus a.Maecenas ut pharetra 前.Nunc volutpat est eu odio 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="inner-alt"><div>eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="容器"><div class="inner">Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Donec dignissim ipsum orci，io 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate</div><div class="inner-alt"><div>ut volutpat ligula finibus a.Maecenas ut pharetra 前.Nunc volutpat est eu odio 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="inner-alt"><div>eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="容器"><div class="inner">Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Donec dignissim ipsum orci，io 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate</div><div class="inner-alt"><div>ut volutpat ligula finibus a.Maecenas ut pharetra 前.Nunc volutpat est eu odio 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="inner-alt"><div>eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

与上面相同的想法，没有额外的包装器和使用 CSS 网格:

.container {显示:网格；网格模板列:1fr 1fr 1fr；网格间隙:10px；边框:1px 实心；填充:10px；box-sizing: 边框框；}.container>div {边框:1px 实心；box-sizing: 边框框；}div.inner {边框颜色:红色；}.inner-alt {溢出:自动；高度:0；最小高度:100%；}

<div class="inner">Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Donec dignissim ipsum orci, </div><div class="inner-alt">ut volutpat ligula finibus a.Maecenas ut pharetra 前.Nunc volutpat est eu odio 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="inner-alt">eget ibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="容器"><div class="inner">Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Donec dignissim ipsum orci，io 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate</div><div class="inner-alt"><div>ut volutpat ligula finibus a.Maecenas ut pharetra 前.Nunc volutpat est eu odio 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="inner-alt">eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="容器"><div class="inner">Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Donec dignissim ipsum orci，io 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate</div><div class="inner-alt">ut volutpat ligula finibus a.Maecenas ut pharetra 前.Nunc volutpat est eu odio 前庭，eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

<div class="inner-alt">eget bibendum risus commodo.Nullam tristique nibh sed iaculis vulputate.Vivamus ac tincidu

I have an outer div which contains three inner divs.

I want the left-most inner div to always determine the height of the outer div. If the other inner divs have less content [than the left-most div], they will have empty space. If they have more content [than the left-most div], they will get a scroll bar.

Some other questions on SO ask about setting the height of an outer div to be the height of the inner div. However, in my case I have multiple inner divs and I don't what the height of the outer div to ever be more or less than the height of the left-most div.

Is there any way to do this, especially using only CSS?

解决方案

An idea is to make some of the content out of the flow using absolute position so it won't have any impact on the height and then use flexbox for the main layout:

.container { display: flex; border: 1px solid; padding: 5px; box-sizing: border-box; } .container>div { flex: 1; margin: 5px; border: 1px solid; box-sizing: border-box; } div.inner { border-color:red; } .inner-alt { position: relative; overflow: auto; } .inner-alt>div { position: absolute; top: 0; right: 0; left: 0; bottom: 0; }

<div class="container"> <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div> <div class="inner-alt"> <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> <div class="inner-alt"> <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> </div> <div class="container"> <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div> <div class="inner-alt"> <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> <div class="inner-alt"> <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> </div> <div class="container"> <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div> <div class="inner-alt"> <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> <div class="inner-alt"> <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> </div>

Here is another trick using height:0;min-height:100%

.container { display: flex; border: 1px solid; padding: 5px; box-sizing: border-box; } .container>div { flex: 1; margin: 5px; border: 1px solid; box-sizing: border-box; } div.inner { border-color:red; } .inner-alt { position: relative; overflow:auto; } .inner-alt>div { height:0; min-height:100%; }

<div class="container"> <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div> <div class="inner-alt"> <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> <div class="inner-alt"> <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> </div> <div class="container"> <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div> <div class="inner-alt"> <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> <div class="inner-alt"> <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> </div> <div class="container"> <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div> <div class="inner-alt"> <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> <div class="inner-alt"> <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> </div>

The same idea as above without extra wrapper and using CSS grid:

.container { display: grid; grid-template-columns:1fr 1fr 1fr; grid-gap:10px; border: 1px solid; padding: 10px; box-sizing: border-box; } .container>div { border: 1px solid; box-sizing: border-box; } div.inner { border-color:red; } .inner-alt { overflow:auto; height:0; min-height:100%; }

<div class="container"> <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div> <div class="inner-alt"> ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> <div class="inner-alt"> eget ibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> <div class="container"> <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div> <div class="inner-alt"> <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> <div class="inner-alt"> eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div> <div class="container"> <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div> <div class="inner-alt"> ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> <div class="inner-alt"> eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div> </div>