我想在页面上创建一个标题，该页面在您滚动页面时不会移动。在CSS中使用可滚动内容创建可变高度“固定”标题

这看起来很简单，只需在样式中添加“position：fixed”，但内容出现在标题下方，因为标题“已从流中删除”。所以我认为解决方案是在内容中添加“margin-top：height”。

什么是解决这个问题的最好方法，当标题的高度是可变的？

我已经得到了证明该问题的小提琴：

http://jsfiddle.net/waterlooalex/j4Z8F/2/

提供了浏览器窗口不是太大，内容文本将滚动的“Hello World头”下面的问题是，第一行文字“Lorem ipsum ...”已隐藏我有一些注释掉javascript可以解决这个问题

来源

2011-07-20 Alex Black

所以你想一个标题，将留在页面的顶部，不动？为什么不把它变成一个'div'并且将它设计成一个头部？似乎是最简单的方法 –

我不知道我明白。我正在使用div，请参阅上面的小提琴链接。 –

我总是在页眉的内容上设置页边空白因为我的标题通常不需要改变高度。

如果你的头部确实改变了高度，那么恐怕你不得不去JavaScript解决它。超出流程意味着页面的其余部分将继续正常进行，JavaScript将不得不介入帮助。

来源

2011-07-20 14:11:58 Flux

啊，它不是标题改变高度，只是我不知道它的高度。例如。它不是100px，只是基于内容的高度，以及浏览器决定渲染内容的大小。 –

您可以添加标题div的第二个副本，即而不是已修复，并在其上使用类似visibility:hidden的东西。这样它会将内容压缩到您需要的确切位置，但不使用JavaScript。有点hackish，但我在你的小提琴尝试它，它的作品。

来源

2011-07-20 14:16:53 curtisdf

多数民众赞成在一个很酷的想法，但开始感觉更骇人，如果我有更多的内容是位置：固定... –

是的，我同意这是hackish。您可以通过对隐藏版本使用替代HTML来最小化在HTML中创建的额外占用空间，该隐藏版本的高度相同，但使用的文本较少。在小提琴示例中，类似

X

而不是

hello world

。一个简单的例子，但带有更复杂的标题，它可能很重要。 – curtisdf

肮脏但有效，太棒了！ –

此JavaScript将采用固定标题的变量高度，并将内容的顶部边距设置为在下面流动。只是呼吁onload

<script type="text/javascript"> 
    function AdjustHeight() { 
     var height = document.getElementById("fixedheader").offsetHeight; 
     document.getElementById("content").style.marginTop = height + 'px'; 
    }  
</script>

来源

2011-11-28 05:23:36 Keith

为了解决这个问题，我最终在我的内容中添加了一个'虚拟'div。该div与标题div具有相同的高度，因此将内容压低到足以创建正确的偏移量。这与@curtisdf上面的答案是一样的，但他建议复制一下你的头文件，我建议用相同的高度做一个空格。

由于有很多原因的高度可以改变（窗口大小调整，内容的变化，...）我结束了使用https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js保持从虚拟DIV高度同步与真正的头：

 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();

请注意，由于aurelia.io's ref implementation，我可以引用真正的头文件（me.summary）和虚拟文件（me.summaryDummy），但是您可以使用JQuery或通过ID获取对div的引用。

来源

2015-06-10 21:59:47

您可以使用flexbox布局模型解决此问题，如下面的演示所示。

请注意，我已将display: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>

来源

2016-04-19 12:19:44

在CSS中使用可滚动内容创建可变高度“固定”标题

回答

X

hello world

相关问题