如何使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/