我想在页面上创建一个头部，在滚动页面时它不会移动。
这似乎很简单，只需将“position：fixed”添加到样式中，但是由于标题已从文本流中“移除”，因此内容会出现在标题下面。所以我认为解决方案是在内容中添加“margin-top:height”。
当标题高度是可变的时，最好的解决方法是什么？
我有一个演示问题的fiddle:
http://jsfiddle.net/waterlooalex/j4Z8F/2/
如果浏览器窗口不太大，内容文本将在“helloworld header”下滚动，问题在于第一行文本“Lorem ipsum ...”被隐藏了。我有一些注释掉的javascript来解决这个问题。
您可以添加一个第二个标题div，并使用类似于visibility:hidden的方法，使其不固定。这样就可以将内容向下推到所需的确切位置，而无需使用JavaScript。这种方法有些投机取巧，但我在您的fiddle中尝试过并且有效。
visibility:hidden 吗？ - funkybrodisplay:flex添加到<body>以进行演示，但理想情况下，您应该将其赋予更具体的父元素。
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
#header {
background: dodgerblue;
}
h1 {
font-size: 2em;
font-weight: 700;
}
#content {
flex: auto;
overflow-y: auto;
}<div id="header">
<h1>hello world</h1>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et ante quam, vitae fringilla odio. Nulla molestie, justo non adipiscing varius, mi turpis luctus ligula, sit amet posuere massa elit a tellus. Cras metus risus, sagittis hendrerit sollicitudin
in, lobortis at elit. Nam posuere molestie enim, sagittis mattis justo vehicula gravida. Fusce placerat porta fermentum. Sed laoreet leo ac tellus consectetur blandit. Sed consequat, ipsum a imperdiet convallis, elit est ultrices elit, et malesuada
lorem magna eu eros. Sed convallis adipiscing nibh ut volutpat. In consequat egestas elit, eget venenatis lacus condimentum sed. Maecenas semper sapien in lacus feugiat volutpat vestibulum dolor pulvinar. Duis ultricies interdum ante elementum tempor.</p>
<p>Aliquam nulla tellus, consequat nec suscipit vitae, laoreet non erat. Donec tempor ligula in nisi porttitor nec interdum magna gravida. Aenean eleifend, ipsum eu tincidunt tristique, orci mi molestie libero, at aliquam massa velit ut tortor. Aenean
nisi velit, feugiat ut posuere eget, porta ac erat. Morbi lobortis ligula nec sem bibendum in imperdiet ipsum tempus. Integer tincidunt mauris quis justo consequat eget pharetra arcu rutrum. Nullam auctor libero luctus eros porta commodo. Aenean auctor
libero eu arcu porta cursus. Fusce viverra arcu nec elit rutrum et fringilla lectus vulputate. Integer sed leo sit amet ligula aliquam suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla commodo
varius lectus, non pellentesque dui ornare vel. Duis pretium purus at sapien sollicitudin posuere. Curabitur volutpat posuere diam, at tincidunt leo lacinia quis. Quisque eu arcu enim. Vestibulum condimentum condimentum erat. Sed eros erat, volutpat
et molestie nec, pharetra vitae diam. Proin tempus, massa vitae malesuada dignissim, ipsum ipsum sagittis neque, ac vehicula neque odio nec urna.</p>
<p>Praesent sed arcu in nunc egestas sagittis sollicitudin at nunc. Curabitur mattis viverra odio. Donec volutpat mauris nec libero molestie quis venenatis mauris convallis. Mauris porta varius nibh, id tincidunt nunc ullamcorper in. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce auctor ultrices vulputate. Nam in lacus metus. Duis tempus fringilla lacus ut tristique. Nunc sed hendrerit nunc. Nunc non tellus a magna accumsan volutpat. Aenean sollicitudin
orci in sapien interdum rhoncus cursus ligula iaculis. Nunc mauris sapien, euismod non egestas vitae, dapibus at libero.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tortor nisi, pellentesque et vestibulum eu, scelerisque eget est. Vivamus porta erat vitae eros sodales accumsan. Duis ligula dui, scelerisque sollicitudin
blandit quis, sollicitudin vel ipsum. Sed semper dictum eleifend. Duis diam leo, ultricies at consequat nec, consectetur vel lacus. Proin semper luctus nisl, ut luctus sapien egestas vitae. Maecenas eu est nisi. Aliquam erat volutpat. Sed vulputate
ligula rutrum nunc fermentum vitae consequat magna congue. Donec accumsan consequat pellentesque. Cras justo enim, venenatis non venenatis eu, faucibus id ligula. Aliquam et lorem purus. Sed fringilla gravida dui vitae viverra. Sed id erat nisl. Nulla
nibh nisi, luctus sed scelerisque id, congue in risus.</p>
<p>Phasellus eu purus nibh, sit amet sodales dui. Integer tincidunt magna id sem varius faucibus. Etiam id condimentum velit. Cras cursus diam eget libero tristique malesuada. Pellentesque quis arcu tincidunt dolor adipiscing congue ut a enim. Nulla nec
lacinia est. Pellentesque nec dui mauris, eu eleifend felis. Aliquam feugiat ultrices mi id hendrerit. Phasellus varius sagittis urna, ut fringilla nisi sollicitudin non. Pellentesque ac ligula dolor, ut volutpat sapien. Curabitur vitae diam quis
ante laoreet suscipit non vitae tellus. Nam id magna est, eu tincidunt odio.
</p>
</div>这段JavaScript代码将获取固定头部的高度变量，并将内容的顶部边距设置为在其下方流动。只需在onload中调用即可。
<script type="text/javascript">
function AdjustHeight() {
var height = document.getElementById("fixedheader").offsetHeight;
document.getElementById("content").style.marginTop = height + 'px';
}
</script>
var me = this;
var summary = me.summary;
var dummy = me.summaryDummy;
var resize = function () {
dummy.style.height = summary.clientHeight + 'px';
};
new ResizeSensor(summary, resize);
resize();
我一直将顶部内容设置为边距，无论标题有多高，因为我的标题通常不需要更改高度。
如果您的标题高度确实发生了变化，那么您就必须使用JavaScript来解决它，我很抱歉。流程之外意味着页面的其余部分将像往常一样进行，并且JavaScript必须介入帮助解决问题。
div并像标题一样进行样式设计呢？这似乎是最简单的方法。 - Soatl