如何将外部 div 的高度设置为始终等于特定内部 div 的高度？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

P粉903052556 2023-11-07 13:59:30

[CSS3讨论组]

1042

我有一个外部 div，其中包含三个内部 div。

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

关于 SO 的其他一些问题询问如何将外部 div 的高度设置为内部 div 的高度。但是，就我而言，我有多个内部 div，并且我不知道外部 div 的高度是否大于或小于最左侧 div 的高度。

有什么方法可以做到这一点，特别是仅使用 CSS 吗？

P粉903052556

全部回复(2)

P粉8514014752023-11-08 13:01:05 2楼

不同的方式。两个例子：

.outer_div {
  position: relative;
  overflow: hidden;
  max-width: 300px;
  margin: 0 auto;
}
.inner_div {
  width: 33.33%;
}
.inner_div_1 {
  float: left;
  background: khaki;
}
.inner_div_2,
.inner_div_3 {
  background: darkkhaki;
  position: absolute;
  top: 0;
  height: 100%;
  overflow-y: auto;
}
.inner_div_2 {
  left: 33.33%;
}
.inner_div_3 {
  left: 66.66%;
}

<div class="outer_div">
  <div class="inner_div inner_div_1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="inner_div inner_div_2">
    Lorem ipsum.
  </div>
  <div class="inner_div inner_div_3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

.outer_div {
  display: flex;
  flex-direction: row;
  max-width: 300px;
  margin: 0 auto;
  background : gray;
}
.inner_div {
  width: 33.33%;
}
.inner_div > div {
  position: relative;
  height: 100%;
}
.inner_div_1 span {
  background: khaki;
}
.inner_div_2 span,
.inner_div_3 span {
  background: darkkhaki;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

<div class="outer_div">
  <div class="inner_div inner_div_1">
    <span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </span>
  </div>
  <div class="inner_div inner_div_2">
    <div>
      <span>
        Lorem ipsum.
      </span>
    </div>
  </div>
  <div class="inner_div inner_div_3">
    <div>
      <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </span>
    </div>
  </div>
</div>

赞 +0

添加回复

P粉9501288192023-11-08 09:49:45 1楼

一个想法是使用绝对位置将一些内容从流程中分离出来，这样就不会对高度产生任何影响，然后使用 Flexbox 作为主布局：

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>