html - 除非存在另一个 div，否则使 div 占据页面的 100%

Question

我正在尝试格式化结帐页面。该页面在左侧显示订单摘要，在右侧显示推荐产品。当没有推荐的产品被使用时，我希望订单摘要能够拉伸(stretch) 100% 的页面。

目前，订单摘要是用 float:left; 设置的；宽度:720px；。而推荐产品float:right;width:240;。

如果我从订单摘要中取出宽度或将其更改为 100% 或自动，它只会低于推荐产品。

我试着附上一张解释一切的照片，但我猜 StackOverFlow 限制新用户发布照片。

Answer 1

实际上这就是您所需要的:DEMO

<div class="summary">
  <div>Order summary...</div>
  <div>Products...</div>
</div>

.summary{
  display:table;
  width:100%;
}
.summary>div{
  display:table-cell;
}
.summary>div:first-child{
  background:gray;
}
.summary>div:nth-child(2){
  background:orange;
  width:240px;
}