如何从滚动区域获取标题？ [英] How to get the header out of the scroll area?
问题描述
我有一个标题和长可滚动的内容。我想标题不能滚动。我尝试设置 overflow：hidden 到标题，但没有成功。
I have a header and a long scrollable content. I'd like the header to not be scrollable. I tried setting overflow: hidden to the header but without success.
滚动区域？
代码段：
<body>
<div style="overflow: hidden">Header</div>
<div style="overflow: scroll">Content - very long Content...
请参阅此代码的Plunker 。
我也尝试在正文中设置样式 - 没有成功。
I also tried setting styles in the body - without success.
我知道有一种使头部固定使用位置固定的方式，但我不想使用它，因为它需要提前知道头的高度（对于边缘）。
I know there's a way to make the header fixed using position fixed, but I don't want to use it because it requires to know the height of the header in advance (for the margin). This requires size duplication and if the header is more complicated, it requires computation.
推荐答案
找到灵活的魔法。
这里是一个如何做一个固定的标题和可滚动的内容。代码：
Here's an example of how to do a fixed header and a scrollable content. Code:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Holy Grail</title>
<!-- Reset browser defaults -->
<link rel="stylesheet" href="reset.css">
</head>
<body style="display: flex; height: 100%; flex-direction: column">
<div>HEADER<br/>------------
</div>
<div style="flex: 1; overflow: auto">
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
</body>
</html>
完整 Holy Grail 实现（页眉，页脚，导航，边和内容），使用弹出显示，转到此处。
For a full Holy Grail implementation (header, footer, nav, side, and content), using flex display, go to here.
这篇关于如何从滚动区域获取标题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
