使用宽度百分比的流体设计，1px边界将其混淆

Question

希望我提供足够的信息来打击错误的头衔。

我正在设计一个网站，它有两个主要部分，侧边栏和内容部分。侧边栏位于左侧，内容位于右侧。到目前为止，我已经使用了这个标记和CSS：

<section id="sidebar">
    sidebar
</section>
<section id="content">
    content
</section>

#sidebar {
    width: 29%;
    background: #f7f3ed;
    float: left;
    padding-right: 1%;
    text-align: right;
}

#content {
    width: 69%;
    padding-left: 1%;
    float: left;
}

希望你能看到我在这里想做的事情。我希望侧边栏和内容区域按百分比定义，因此当浏览器窗口调整大小时，它们会保持原状。

但是，我希望侧边栏的右边有一个像素边框，将其与内容区域分开。当我添加它时，内容区域被推到侧边栏下方，因为整体宽度超过100％的1个像素。

这是一个jsfiddle示例：http://jsfiddle.net/juffd/

如何在侧边栏下没有内容区域包装的情况下应用边框，而没有专门指定每个元素的宽度（以像素为单位）？

Answer 1

使用box-sizing: border-box;。这使得元素的宽度包括其填充以及任何边框。