如何 - 使标题跨全宽并位于页面顶部答案

【问题标题】：how to - make header span full width and be at the top of the page如何 - 使标题跨全宽并位于页面顶部
【发布时间】：2015-03-28 10:14:30
【问题描述】：

我正在尝试使用带有背景图像和 H1 和 H2 标记的标题标签。

页眉不在页面顶部 - 如何让它位于顶部？

标题没有填满整个宽度 - 我如何让它填满整个宽度？

示例：http://www.bobnovell.com/headertest.html

我还想消除 H1 和 H2 之间的空行。我尝试了 line-height: 0px ，它消除了 H1 和 H2 之间的空间，但标题的高度减小了，使得 H1 伸出标题上方，H2 伸出标题下方。

示例：http://www.bobnovell.com/headertest_1.html

另一个转折 - 如果我定义边框：1px 纯红色，标题将移近顶部，并且标题的高度足以包含 H1 和 H2。

问题是 - 我不希望标题上有边框。

http://www.bobnovell.com/headertest_2.html（此页面可能显示的是旧版本而不是当前版本 - 我的托管公司存在某种问题。如果您看到 H1 周围有边框而不是标题，请等待并重新加载 - 问题似乎在一段时间后自行解决）

但是等等，如果我将边框的颜色设置为白色，它会消除可见的边框，但必须有某种方法让它在没有定义边框的情况下正确显示。

http://www.bobnovell.com/headertest_3.html

有什么建议吗？

鲍勃

【问题讨论】：

标签： html css header

【解决方案1】：

这些都是边际问题。例如，您的 H1 标签顶部的边距导致页面顶部的空间。添加内联样式将删除该空间。

<h1 style="margin-top:0px"></h1>

margins 也会导致你的全宽问题将你的 body margins 设置为 0px。

<body style="margin:0px"></body>

我想你明白了。您可以通过右键单击并选择 Chrome 中的检查元素来解决这些问题。当您突出显示不同的标签时，它会以不同颜色显示元素的边距、边框和填充，让您了解正在发生的事情。

【讨论】：

【解决方案2】：

header 未使用全宽，因为body 元素上有边距或填充。您可以删除它：

body { margin: 0; padding: 0; }

（您需要将两者都删除，因为某些浏览器为此使用填充而不是边距。）

这也会让你的文本一直走出来，这不是那么漂亮，所以你会想要一个边距：

#lipsum { margin: 0 10px; }

h1和h2元素的边距用在header元素之外的原因称为margin collapsing。您可以使用overflow 样式，而不是使用边框来防止它：

header { overflow: hidden; }

【讨论】：

有没有办法给header margin:0px padding:0px;除了把它放在身体上？我宁愿不必在页面上的所有其他元素上设置边距和填充 - 将标题包装在 div 中并将边距和填充设置为零怎么样？溢出：隐藏在标题上就可以了。
好的 - 全部解决 - 将正文的边距和填充设置为 0，将溢出设置为隐藏在标题上，插入一个 div 来容纳正文的其余部分（在标题下）并将 div 设置为左侧和右边距为 10px，上下边距为 0。看bobnovell.com/headertest_1.html
@BobN：是的，效果很好。请注意，第一个和最后一个 p 元素的边距被折叠，以便在包含 div 之外使用它们，但这不是问题，除非您也想为此使用背景。

【解决方案3】：

使用 CSS Reset 可以解决很多问题。 http://meyerweb.com/eric/tools/css/reset/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1 {
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: center;
font-size: 50px;
}
h2 {
font-weight: normal;
text-transform: none;
text-align: center;
font-family: Arial,Helvetica,sans-serif;
font-style: italic;
font-size: 20px
}
header {
	border: 10px #FF0000 solid;
	border-width: 0px;
	background: url("http://www.bobnovell.com/images/white_brick_wall_@2X.png") repeat scroll center top;
	display: block;
}

<header><!-- style="height: auto">-->
	<h1>H1</h1>
	<h2>H2</h2>
</header><!--</div>-->
<div id="lipsum">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet 
	mattis mattis. Cras non lacus turpis. Vivamus auctor erat a tempus gravida. 
	Morbi in porta lacus. Vestibulum ante ipsum primis in faucibus orci luctus 
	et ultrices posuere cubilia Curae; Pellentesque sed orci non est volutpat 
	semper vel laoreet magna. Aliquam tempus enim eros, lacinia ultricies massa 
	volutpat non. Integer tristique placerat hendrerit. Vivamus gravida est 
	ante, at varius arcu rhoncus eget. Mauris pretium semper nisl, non viverra 
	risus molestie sit amet. Morbi diam libero, malesuada ac consectetur vel, 
	porta in sem. Aliquam posuere fringilla tortor eget fringilla. Vestibulum 
	condimentum, orci vel varius tincidunt, justo lectus semper metus, non 
	pulvinar eros enim ut elit. </p>
	<p>Sed purus arcu, euismod eu elit vel, tristique scelerisque leo. Curabitur 
	vehicula aliquet ligula sed venenatis. Aliquam euismod euismod cursus. 
	Vestibulum aliquam ut justo et imperdiet. Duis vehicula scelerisque dictum. 
	Donec aliquet leo quis hendrerit condimentum. Aliquam eu sapien nec lacus 
	tempus accumsan vitae at nisi. Mauris arcu urna, commodo vel scelerisque 
	eget, convallis vel elit. Suspendisse sit amet feugiat ex, eu tempus orci.
	</p>
	<p>Vestibulum ultrices vulputate nibh. Nullam sit amet libero vitae diam 
	porta imperdiet. Maecenas et eros at risus mattis dictum eu et quam. 
	Pellentesque vel magna sed orci eleifend ultricies sed eget orci. Nullam 
	pharetra, ligula at egestas ornare, arcu enim volutpat mauris, eu lacinia 
	ante felis nec elit. Fusce ac rutrum nunc, a faucibus dui. Mauris consequat, 
	ante at sollicitudin vestibulum, metus diam placerat felis, sit amet 
	condimentum lectus leo ac orci. Etiam tellus purus, vehicula nec ipsum id, 
	scelerisque efficitur sem. Praesent aliquam neque urna, sed finibus diam 
	placerat sed. Donec tristique tincidunt est, fermentum facilisis tortor. 
	Vestibulum nec nibh vestibulum, semper arcu eget, accumsan sapien. Nulla ac 
	luctus turpis, eu egestas ex. Aliquam sed arcu non dui volutpat maximus sed 
	ac magna. Ut eros neque, faucibus a lacus eu, faucibus tempus ex. Nulla 
	eleifend elit ac lacus gravida condimentum facilisis eu urna. </p>
	<p>Nulla non placerat ante. Quisque ac dui dolor. Duis sit amet risus 
	mauris. Nullam laoreet ipsum sit amet libero consequat, non eleifend dui 
	mollis. Proin ullamcorper, elit auctor auctor vestibulum, magna justo auctor 
	ipsum, eu egestas neque risus eget massa. Nam feugiat tortor ac urna ornare, 
	at egestas enim scelerisque. In efficitur rutrum tellus non scelerisque. 
	Morbi consequat et metus ut finibus. </p>
	<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam 
	fringilla, massa id molestie dictum, neque ipsum aliquet nisi, pellentesque 
	molestie mauris lectus in ex. Interdum et malesuada fames ac ante ipsum 
	primis in faucibus. Nullam vitae eros eros. Praesent eget libero sit amet 
	ligula fringilla rutrum vel id quam. Etiam vestibulum condimentum justo, 
	quis luctus lectus tempus ac. In hac habitasse platea dictumst. Phasellus 
	feugiat pharetra lectus, quis dignissim nunc tincidunt ut. </p>
</div>

【讨论】：