如何使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吗？

• 这是一个2格的小提琴 。
• 这是只有正确的div的小提琴 。

如何使DIV宽度无论内容如何都为100％？

Answer 1

通过添加display: table;尝试此操作display: table; ：

#main{
width:100%;
border:1px solid red; 
position:relative;
display: table;
}
#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;    
}

JSFIDDLE演示

Answer 2

将display：table添加到容器

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

更新的小提琴： http : //jsfiddle.net/jgt07w7d/9/