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

我试图制作一个票务系统，它的设计与论坛线程系统类似，即在左侧具有用户信息，如头像和用户名，然后已经在右手侧的后数据，我已成功地使HTML/CSS此一设计，它完美的作品，但有一个问题如何让div在自动调整大小时填充父项

enter image description here

正如你可以看到右手列时拉伸（由于它充满内容，左手列不适合伸展）

我试过设置他在左栏为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的背景不跟右侧相同的高度）

来源

2014-12-13 Enchanta Support

使用'table'和'表cell'显示。 – Abhitalks 2014-12-13 14:53:07

浮动从文档流中移除内容，这使得父容器的高度为“0px”。确保在父级上设置绝对高度。 – Brian 2014-12-13 14:54:44

如果你不需要支持旧浏览器，'flex'是最好的选择。 – Leo 2014-12-13 14:59:28

-1

尝试内的div以下样式：

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

来源

2014-12-13 15:07:16 SLeptons

通过使用表格单元格显示，对于内的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);

}

来源

2014-12-13 17:41:15

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

回答

相关问题