想要使无内容 div 响应相邻 div 的高度

Question

制作 Reactjs 应用程序。参考代码，我想让 colorTab div 的高度与 content div 的高度相等并响应。 content 的高度必须是动态的，因为我希望它由 tile + description 中可变的文本量和 [=38 的宽度定义=].

目前，当我从 colorTab 的 CSS 中省略 min-height 并简单地让 height: 100%; 定义 colorTab 的高度时，colorTab 消失。添加 min-height 给它那个高度，但随后它对 content 的高度没有反应，这是目标。我该如何解决这个问题？

JSX:

<div className="wrapper">
  <div className="colorTab" style={color}>

  </div>
  <div className="content">
    <tr>
      <td className="title">
        <a href={link}>{title}</a>
      </td>
    </tr>
    <tr>
      <td className="description">
        {description}
      </td>
    </tr>
  </div>
</div>

CSS:

.wrapper {
  min-height: 48px;
  overflow: hidden;
}

.colorTab {
  float: left;
  position: relative;
  width: 5px;
  min-height: 48px;
  height: 100%;
  border-radius: 5px;
  margin-left: 15px;
}

.title {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.description {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

Answer 1

Flexbox 将提供您需要的功能。

将 display: flex 放在容器 class 上。并且 flex: 1 您的内容 div。无论您在 content div 中放置多少内容，colorTab div 都会匹配其高度。

纯 HTML/CSS 中的示例（无 React）：

.wrapper {
  overflow: hidden;
  display: flex;
}

.colorTab {
  position: relative;
  width: 5px;
  border-radius: 5px;
  background: red;
}

.content {
  flex: 1;
}

<div class="wrapper">
  <div class="colorTab">
  
  </div>
  <div class="content">
      <div class="title">
        <a>Your Title</a>
      </div>
      <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
      </div>
  </div>

Answer 2

Now, I would absolutely recommend the flexbox mentioned in the other answer but...

但对于其他一些不支持它的过时浏览器（咳咳嗽看着你，爷爷，使用相同的旧版本 IE)... 提供额外的版本支持可能是个好主意。

所以，为了回答的完整： 另一种选择是利用 tables.

.wrapper {
  display: table;
}

.description {
  display: table-cell;
}

.colorTab {
  display: table-cell;
  width: 5px;
  border-radius: 5px;
  background: red;
}

// not necessary, but for esthetic reasons
.content {
  position: relative;
  left: 10px;
}

<div class="wrapper">
  <div class="colorTab">
  </div>
  <div class="content">
      <div class="title">
        <a>Your Title</a>
      </div>
      <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
      </div>
  </div>

想要使无内容 div 响应相邻 div 的高度

Want to make contentless div responsive to height of adjacent div

html

css

jsx

web-frontend

reactjs