无法将固定标头与内容div对齐

Question

我试图创建一个标题，其中标题是固定的，中间标题div与内容div对齐。

我有两个问题：

1. 我无法解决一个小偏移。
2. content-wrapper的边框顶部不可见，为什么？

小提琴：http://jsfiddle.net/sxZJ3/3/

偏移且没有border-top：

Answer 1

偏移是由于您在padding: 5px上设置了width: 100%。

您无法看到border-top的原因是因为border-bottom上的#header，它为1px增加了61px个高度，总共height 1}}。我会将59px缩减为60px，从而产生{{1}}的总高度。

编辑：这是updated fiddle

Answer 2

轻松解决方法是将width: 100%;替换为right:0; left: 0;：http://jsfiddle.net/sxZJ3/14/

Answer 3

如果删除填充没有问题，主要内容直接浮动在标题下方。如果你想减少这个差距，你可以使用填充或其他各种选项。保证金甚至使用内联的两个元素的单边框。

还可以尝试一些定位技巧。在容器内部划分一个postition：relative和一个固定高度。然后在div位置：绝对然后边距和填充必要。

Answer 4

我建议在这些行中添加更多内容，删除正文边距并允许内容包装器成为推送内容的唯一边距。此外，标题内的填充导致#menu在标题元素内偏移5px。 http://jsfiddle.net/sxZJ3/12/