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？

如何使DIV宽度100％与内容无关？

Answer 1

通过添加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

Answer 2

将display：table添加到容器

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

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

如何使div扩展宽度100％响应？

2 个答案: