简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如何将外部 div 的高度设置为始终等于特定内部 div 的高度？
P粉903052556
P粉903052556 2023-11-07 13:59:30
0
2
568

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

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

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

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

P粉903052556
P粉903052556

全部回复(2)
P粉851401475
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粉950128819
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
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！