تريد أن تجعل div بلا محتوى تستجيب لارتفاع div المجاور

1

صنع تطبيق Reactjs. بالإشارة إلى الرمز ، أود أن أجعل ارتفاع colorTab div ، على قدم المساواة واستجابة لذلك content شعبة. ارتفاع content يجب أن يكون ديناميكيًا نظرًا لأنني أرغب في أن يتم تحديده من خلال مقدار النص في tile + description ، وهو متغير ، وعرض النافذة.

حاليا ، عندما أغفل min-height من عند colorTab CSS وببساطة 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;
}

2 الاجابة

1
افضل جواب

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>

:مؤلف
مشاركة الرابط
1
افضل جواب

سوف تقدم Flexbox الوظائف التي تحتاجها.

وضع display: flex في فئة الحاوية الخاصة بك. و flex: 1 على قسم المحتوى الخاص بك. بغض النظر عن مقدار المحتوى الذي تضعه في المحتوى يقسم colorTab div سيطابق ارتفاعه.

مثال في HTML / CSS خالص (بدون تفاعل): 

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

:مؤلف
مشاركة الرابط

أسئلة ذات صلة

أسئلة شائعة:

علامات السؤال:
jsx
web-frontend
فوق
قائمة طعام