صنع تطبيق 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;
}