javascript - 如何使 div 响应式地扩展宽度 100%？

Question

我有两个 div(左、右)。对于某些页面/请求，左侧 div 中的内容将为空；对于此类请求，我想隐藏左侧的 div。当隐藏/删除左侧 div 时，我希望右侧 div 填充整个页面。

为了实现这一点，我使用了 table-cell。它有效，但是当我删除左侧 div 时，右侧 div 宽度从整页 (100%) 更改为内容宽度。

HTML

<div id="main">
<div id="left">testjjj</div>
<div id="right">test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test test made in test made in test madein<br /></div>
</div>

CSS

#main{width:100%;border:1px solid red; position:relative }
#left {               
    display: table-cell;
    width:100px; 
    vertical-align:middle; 
    text-align:center;
    background:red
    }

#right {               
    display: table-cell;
    width:100%; 
    vertical-align:middle; 
    background:lightblue;
    text-align:left;

}

如果删除左侧的 div，右侧的 div 宽度将固定为内容宽度。除了将 min-width 传递给右 div 之外，还有其他方法吗？

• > Here is a fiddle with 2 divs .
• > Here is a fiddle with only the right div .

如何使正确的 DIV 宽度为 100%，而不考虑内容？

Answer 1

添加显示:表到容器

#main{width:100%;display:table;border:1px solid red; position:relative }

更新的 fiddle :http://jsfiddle.net/jgt07w7d/9/