Menu
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...
See a Plunker with this code.
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.
479
Creating a non-scrolling header You can create a non-scrolling header using the position and overflow properties. In the example below, the header has a height of 100px. If the browser window is very narrow, the header's content may not fit inside the header.
We can create such a table with either of the two approaches. By setting the position property to “sticky” and specifying “0” as a value of the top property for the <th> element. By setting the display to “block” for both <thead> and <tbody> element so that we can apply the height and overflow properties to <tbody>.
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.
151
Remove your inline styles first. Then add this css.
html , body {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow: scroll;
}
https://jsfiddle.net/sthsuuec/11/
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
