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

Question

我正在尝试创建一种布局，其中标头是固定的，中间标头div与内容div对齐。

我有两个问题：

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

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

偏移且无边框

Answer 1

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

您看不到border-top的原因是因为#header上的border-bottom使其额外增加了1px的高度，总共为61px 。 我会降低height到59px ，由此产生的总高度60px 。

编辑：这是一个更新的小提琴

Answer 2

轻松解决就是更换width: 100%; right:0; left: 0; right:0; left: 0; ： http ： //jsfiddle.net/sxZJ3/14/

Answer 3

如果您删除了填充，则没有问题，主要内容直接浮在标题下方。 如果要减小此间隙，可以使用填充或其他多种选择。 内联两个元素的边距甚至使用单个边框。

也可以尝试一些定位技巧。 在具有postition：relative和高度固定的容器内的Div。 然后在div位置：绝对，然后根据需要添加边距和填充。

Answer 4

我会建议您按照以下方式进行构建，即删除正文边距并让内容包装器成为压低内容的唯一余量。 此外，标题内的填充还会导致#menu在标题元素内偏移5px。 http://jsfiddle.net/sxZJ3/12/