我有两个垂直排列的div.这两个div都扩展了100%宽度.我正在寻找一种方法,让底部div的高度由它内部存在的内容确定,以及顶部div的高度动态调整自身大小,使其高度与底部div的高度相同.

顶部div包含少量文本,而底部div包含大量文本.显然,随着屏幕尺寸的缩小和文本换行,div会变得更长.例如,随着屏幕尺寸缩小,包含大量文本的底部div变得比顶部div更长,顶部div的大小应该会增加.

我知道这样的事情可以通过事件监听程序或类似的东西通过动态设置div的高度来用javascript来完成,但我正在寻找一种可以用html和css来完成的方法.

我已经try 了弹性增长和基于身高百分比的实验,但都没有效果.我非常感激任何人可能有的洞察力!

.container {
  display: flex;
  flex-direction: column;
}

.b1 {
  background-color: red;
  height: 50%;
}

.b2 {
  background-color: orange;
  height: 50%;
}

.box {
  flex-grow: 1;
}
<div class="container">
  <div class="box b1">One</div>
  <div class="box b2">
    DIV B Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

推荐答案

以下是仅限css的示例:回答帮助方式:Michael Benjamin

.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  margin-bottom: 25px;
}

.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  margin-bottom: 25px;
}

.b1 {
  background-color: red;
}

.b2 {
  background-color: orange;
}

body {
  margin: 0
}
<div class="container">
  <div class="box b1">One</div>
  <div class="box b2">
    DIV B Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

<div class="container">
  <div class="box b1">One</div>
  <div class="box b2">
    DIV B Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

是实现您想要的结果的一个Java脚本代码片段:

const container = document.querySelector('.container');
const b1 = document.querySelector('.b1');
const b2 = document.querySelector('.b2');

function setHeight() {
  const b2Height = b2.offsetHeight;
  b1.style.height = `${b2Height}px`;
}

window.addEventListener('resize', setHeight);
setHeight();

现场演示:

const container = document.querySelector('.container');
const b1 = document.querySelector('.b1');
const b2 = document.querySelector('.b2');

function setHeight() {
  const b2Height = b2.offsetHeight;
  b1.style.height = `${b2Height}px`;
}

window.addEventListener('resize', setHeight);
setHeight();
.container {
    display: flex;
    flex-direction: column;
  }

  .b1 {
    background-color: red;
    height: 50%;
  }

  .b2 {
    background-color: orange;
    height: 50%;
  }

  .box {
    flex-grow: 1;
  }
<div class="container">
  <div class="box b1">One</div>
  <div class="box b2">
    DIV B Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever since
    the 1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

Html相关问答推荐

应用于文本而不是弹性容器的Flexbox属性

为什么这个高度为100%的页面会出现滚动条?

将弹性容器设置为内容宽度

在Chrome中使用手写笔时,滚动条方向反转

如何在R中渲染Quarto文档时动态设置html文件名

Chatbox底部显示新消息,并向上推送旧消息

Web 组件 #shadow-root css 泄漏到文档

为什么我的网页显示网格区域彼此相邻,而不是我设置它们的方式?

如何在悬停时使矩形按钮上的边框变圆

如何避免链接在悬停 timeshift 动,同时增加导航栏中的字体大小?

将现有内容拆分为三列或部分

HTML画布放大/缩小算法与CSS(图像处理)

增加第一个字母的大小不再正确居中文本

两部分问题 - 是什么导致了这个空白?

如何将某些 div 的高度限制为具有 display flex 行的同一父 div 中的其他 div?

为什么图像会影响我的

使元素扩展宽度减go margin-right

如何使文本显示在页眉/页脚之外?

如何使用 :hover zoom 重叠图像?

如何计算没有根元素的先前 html 标记(lxml python3)编辑:还获取元素