具有灵活宽度的缩进div

Question

我正在尝试创建一个从左侧开始200px并延伸到右侧页面边缘但不会超出的div。现在，它的宽度为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

据我所知，如果没有CSS3中引入的calc（）函数，这是不可能的。

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

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

Answer 3

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

我认为你需要做的就是将左边的边距设置为200px。