Question

制作一个Reactjs应用。参考代码，我想使colorTab div的高度相等，并响应content div的高度。假设我希望content + tile中的文本量（可变）和窗口的宽度来定义description的高度，那么它必须是动态的。 / p>

当前，当我从min-height的CSS中省略colorTab并只是用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放在您的容器类上。然后在内容div上使用flex: 1。无论您在内容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

现在，我绝对会推荐其他答案中提到的flexbox，但是...

，但对于某些其他不支持它的过时浏览器（咳嗽咳嗽，爷爷，使用的是相同版本的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的高度

2 个答案: