如何使 div 响应式扩展宽度 100%？答案

【问题标题】：How to make div expand width 100% responsively?如何使 div 响应式扩展宽度 100%？
【发布时间】：2015-04-11 07:40:33
【问题描述】：

我有两个 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 之外，还有其他方法吗？

如何使正确的 DIV 宽度为 100% 而与内容无关？

【问题讨论】：

将display: table添加到容器#main：jsfiddle.net/hashem/jgt07w7d/7

标签： javascript jquery html css

【解决方案1】：

将 display:table 添加到容器中

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

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

【讨论】：

【解决方案2】：

添加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 DEMO

【讨论】：