两个div的CSS属性 - 不符合预期的宽度

Question

我有一个标题栏，下面有一个内容div，我希望在宽度上匹配。然而，内容div似乎在左侧略微偏移，并且在该图像的右侧显示略微变窄：

标题div还有一个小动态JS来使它＆＃34;坚持＆＃34;到页面的顶部，因此＆＃34;坚持＆＃34; css的一部分也包括在内。

标题div

#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

在这里回答。

所以你要做的就是为所有的啤酒添加盒子大小：

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

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

接下来，对于身高，你有两个选项，固定导航的高度或添加填充。我会使用固定高度，并将行高添加到相同的高度，以便将文本居中。

多数民众赞成。