如何使div扩展宽度100%响应?

时间:2015-04-11 07:40:34

标签: javascript jquery html css css3

我有两个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%与内容无关?

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:2)

将display:table添加到容器

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

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