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

Posted 2023-03-06

【中文标题】除非另一个 div 存在，否则让 div 占据页面的 100%

【英文标题】：Make div take up 100% of page unless another div is present

【发布时间】：2014-01-14 09:58:50

【问题描述】：

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

目前订单摘要设置为float:left; width:720px;。同时推荐产品float:right;width:240;。

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

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

【问题讨论】：

如果您将链接添加到照片中，其他用户可以对其进行编辑。

你可以使用 jQuery 吗？

这个小提琴是否准确描述了您正在处理的布局？

@user 非常感谢您的评论。

【参考方案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;

【讨论】：

点击希望告诉他使用 javascript，但是，虽然依赖于实施，但您的回答教会了我一些东西。很酷！

【参考方案2】：

我相信这描述了您的情况。尝试使用底部的按钮来回切换：

http://jsfiddle.net/T2Quv/21/

这里的关键是根据推荐产品是显示还是隐藏，从javascript动态设置宽度：

$('.mrbutton').click(function()
   $('.rec').toggle(); 

    if($('.rec').css('display') == 'none')
    $('.checkout').css('width', '100%');  
    else
       $('.checkout').css('width', '69%');  
        ;
 );

您还没有告诉我们推荐产品是如何显示/隐藏的，但希望这会有所帮助。