如何让div在自动调整大小时填充父级

Question

我正在尝试建立一个票务系统，它的设计类似于论坛帖子系统，即在左侧有用户信息，如头像和用户名，然后在帖子数据上设置右手边，我已经设法在html / css中为此设计了它并且它完美地工作但是有一个问题

正如您所看到的那样，当右侧的柱子伸展时（由于它充满了内容，左侧的柱子没有拉伸）

我尝试将左侧栏的高度设置为100％以有效填充其容器，但它似乎无法正常工作

HTML：

         <div class="ticket_content">
              <div class="tickets_left"><img src="images/avatar_admin.png"/>
                  <div class="usernameinfo">ADMINISTRATOR</div>
                <div clas="clear"></div>
              </div>
              <div class="tickets_right_admin"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div>
              <div class="clear"/></div>
      </div>

CSS

.ticket_content {
width: 900px;
display: block;
border: 2px solid #171B1E;
border-radius: 6px;
background: none repeat scroll 0% 0% #121416;
margin-bottom: 22px;
box-shadow: 0px 0px 7px rgba(212, 198, 198, 0.79);

}

.tickets_right {
float: left;
width: 750px;
min-height: 185px;
background: none repeat scroll 0% 0% #121416;
}

.tickets_right_admin {
background: #353018;
float: left;
width: 750px;
min-height: 185px;

}

.tickets_right_admin p{
padding:18px;
}


.tickets_left {

float:left;
width: 141px;
background:red;
min-height: 185px;
background: url('../images/leftsiderepeat.png') repeat-y;

}

当tickets_left拉伸ticket_content时，我想要实现的是tickets_right垂直填充tickets_left（正如您在图片中看到{{1}的背景一样}不跟右手边的高度相同）

Answer 1

通过使用表格单元格显示固定，对于外部div的内部div和表格显示，还添加了
    垂直对齐：顶部 到内部div的

修正了css：

.tickets_left {
display: table-cell;
vertical-align: top;
width: 141px;
background:red;
min-height: 185px;
background: url('../images/leftsiderepeat.png') repeat-y;

}

.tickets_right {
display:table-cell;
float: left;
width: 750px;
min-height: 185px;
background: none repeat scroll 0% 0% #121416;

}

.tickets_right_admin {
display: table-cell;
background: #353018;
float: left;
width: 750px;
min-height: 185px;

}

.ticket_content {
display: table;
width: 900px;

border: 2px solid #171B1E;
border-radius: 6px;
background: none repeat scroll 0% 0% #121416;
margin-bottom: 22px;
box-shadow: 0px 0px 7px rgba(212, 198, 198, 0.79);

}

Answer 2

为内部div尝试以下样式：

{
  position: relative;
  left: 0; 
  top: 0; 
  width100%; 
  height:100%;
}