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.
How can I get the header out of the scroll area?
Snippet:
<body>
<div style="overflow: hidden">Header</div>
<div style="overflow: scroll">Content - very long Content...
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.
Remove your inline styles first. Then add this css.
html , body {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow: scroll;
}
Found the flex magic.
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>
For a full Holy Grail implementation (header, footer, nav, side, and content), using flex display, go to here.
来源:https://stackoverflow.com/questions/33075195/how-to-get-the-header-out-of-the-scroll-area