我有两个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%与内容无关?
答案 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;
}
答案 1 :(得分:2)
将display:table添加到容器
#main{width:100%;display:table;border:1px solid red; position:relative }