两个 div 的 CSS 属性 - 与预期的宽度不匹配

Question

我有一个标题栏，它下面有一个内容 div，我希望它的宽度匹配。然而，内容 div 似乎稍微向左偏移，并且略微变窄，如下图右侧所示:

标题 div 也有一点动态 JS 使其“粘”在页面顶部，因此 css 的“粘”部分也包含在内。

标题格

#menu {
    margin-top: 10px;
    padding: 0.5ex;
    width: 100%;
    background-color: #0B0000;
    color: #ffffff;
    height: 16px;
}
#menu.stick {
    margin-top: 0 !important;
    position: sticky;
    top: 0;
    z-index: 10000;
}

根背景

#bodystyle {
    background-color: #efefef;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
}

页面内容

#pagecontent {
    /*width: 100%;*/ <=== This being set does not remedy the problem.
    padding-left: 7%;     Instead the div expands to the right hand 
    padding-right: 7%;    edge of the page.
    padding-top: 3%;
    background-color: #ffffff !important;
}

标题的边缘可能会受到文本填充的影响吗？我自己认为不会。或者，这是预期的行为吗？理想情况下，我希望标题和内容 div 的两侧完全统一。

Answer 1

在这里回答。

所以你要做的是为所有元素添加 box-sizing:

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

这可能会在您的 css 重置后立即进行。这样，当您设置元素的宽度时，这就是它的宽度，因为填充现在发生在该宽度内。

接下来是高度，您有 2 个选项，固定导航高度或向其添加填充。我会使用固定高度，并将行高添加到相同的高度，以便将文本居中。

就是这样。