在CSS中创建一个带有响应容器的固定宽度的边栏，用于旁边的内容

Question

我在页面左侧有一个固定宽度的容器（200px），在内容的右侧有一个响应容器。

我希望内容可以在右侧的容器中居中，并使用以下CSS做到了：

.sidebar {
width: 10%;
position: fixed;
height: 100%;
background-color: red;
}

.parent {
position: relative;
width: 90%;
height:auto;
margin-left: 10%;
border: 2px solid #000;
}

#kid {
width: 75%;
margin: 0 auto;
border:2px solid #f00;
}

如何使用固定宽度的边栏（200px）复制此行为？ JSFiddle： http : //jsfiddle.net/Dnjwa/1/

任何帮助表示赞赏，谢谢！

Answer 1

您可以使用CSS calc函数完成此操作。 例如：

.parent {
    width: -webkit-calc(100% - 200px);
    width: calc(100% - 200px);
}

参见更新的小提琴 。
calc支持 。

如果您不想使用calc ，则可以使用padding来完成，但是如果要使用此方法，则需要考虑一些注意事项。 见小提琴 。