html - 使用宽度百分比的流畅设计，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;
}

希望你能看到我在这里尝试做的事情。我希望侧边栏和内容区域由百分比定​​义，以便在调整浏览器窗口大小时它们保持形状。

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

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

如何在没有内容区域环绕在侧边栏下方并且没有具体指定每个元素的宽度（以像素为单位）的情况下应用边框？

Answer 1

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