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

【问题标题】：How to get div to fill parent on auto resize如何让 div 在自动调整大小时填充父级
【发布时间】：2014-12-13 14:49:23
【问题描述】：

我正在尝试做一个票务系统，它的设计类似于论坛线程系统，即在左侧有用户信息，如头像和用户名，然后在右侧有帖子数据，我已经设法在 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_right 拉伸它时垂直填充tickets_left 填充ticket_content（如您在图像中看到的tickets_left 的背景不遵循与右侧相同的高度手边）

【问题讨论】：

使用table和table-cell显示。
浮动从文档流中移除内容，这使得父容器的高度为0px。确保在父级上设置绝对高度。
如果不需要支持旧版浏览器，flex是最佳选择。
嗨，删除浮动并使用表格单元格显示似乎让我到了那里，但内容现在从底部而不是顶部显示，i.imgur.com/MuG7fXz.png

标签： html css stretch

【解决方案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);

}

【讨论】：

【解决方案2】：

为内部 div 尝试以下样式：

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

【讨论】：