灵活宽度的缩进div

Question

我想创建一个div，从左边开始200px，并延伸到右边的页面边缘但不超出。现在以100％的宽度将页面向右延伸200px。没有宽度，它仍然超出200px。

任何想法如何使这项工作？

#MsgBanner{ 
    position:relative; 
    background-color:#333; 
    top:60px; 
    height:30px; 
    z-index:14; 
    width:100%; 
    left:200px; 
} 

Answer 1

你可以使用：

#MsgBanner { 
width: auto; 
margin-left: 200px; 
} 

Answer 2

#MsgBanner{ position:relative; background-color:#333; top:60px; height:30px; z-index:14; width:100%; margin-left:200px;} 

我认为，所有你需要做的是设置margin在左边200像素代替。

Answer 3

据我所知，这是不可能的，而不在CSS3引入的钙（）函数。

#MsgBanner{ 
    position:relative; 
    background-color:#333; 
    top:60px; 
    height:30px; 
    z-index:14; 
    width:calc(100% - 200px); 
    left:200px; 
} 

上面会解决CSS3中的问题，但并不是所有的浏览器都支持它。