你如何设置外部div的高度始终等于特定的内部div？ [英] How can you set the height of an outer div to always be equal to a particular inner div?

问题描述

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

我想让最左边的内部div始终确定外部div的高度即可。如果其他内部div的内容少于最左边的div，则它们将具有空白空间。如果他们有更多的内容[比最左边的div]，他们会得到一个滚动条。

关于SO的其他一些问题询问有关设置外部div的高度成为 内部div的高度。然而，在我的情况下，我有多个内部div，我不知道外部div的高度是多少少于最左边的div的高度。

有没有办法做到这一点，特别是只使用CSS？

解决方案

一个想法是使用绝对位置使某些内容脱离流动，所以它不会对高度产生任何影响，然后使用一些flex：

  .container {display：flex; border：1px solid;填充：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;正确：0;左：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赌注。 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赌注。 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赌注。 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>  

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 some flex:

.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>

这篇关于你如何设置外部div的高度始终等于特定的内部div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！