2

Making the header { position:fixed } in a basic 

<header></header>
<article></article>
<footer></footer>

layout, causes some quirks, since the article now starts at top = 0 such that its content is hidden by the header. A common workaround is to set the article's padding or margin equals to the header height. And here lays the problem: Assuming some header size is risky. Javascript can be used to measure the header heigth and set the padding accordingly, but this is not pure css. Duplicating the header with { visibility: hidden, position: initial } is the best pure CSS solution I found:

http://codepen.io/parkerbennett/pen/lzqEH

or here at position fixed header in html (@James in a comment)

Question: In the year 2017, is there a pure CSS (no JS) solution without duplicating the header, that avoids this workaround?

I came up with this flex solution, but it is not perfect and therefore does not beat the workaround above (which from user perspective is perfect):

<html>
<head>
    <title>lab</title>
    <style>
        /* reset */
        body, div {
            padding: 0;
            margin: 0;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        article {
            display: flex;
            flex: 1;
            overflow: auto;
        }
    </style>
</head>
<body>
    <header>header text</header>
    <article>
        scrollable text
    </article>
    <footer>footer content</footer>
</body>
</html>

The problem here is, the scrollbar does not go over the full browser window height, but only along the article height.

I also thought about using CSS3 calc() but we cannot measure the height of the header and use this as margin inside the article-css.

Community
  • 1
  • 1
citykid
  • 9,916
  • 10
  • 55
  • 91
  • What is wrong with that the scrollbar does not go over the full browser window height? – Asons Mar 12 '17 at 11:30
  • You could make your tag scrollable. Or you could create a div scrollable and inside all your stuff. –  Mar 12 '17 at 11:33
  • At least on Browser under WIndows the scrollbar rectangle looks ugly. Apple Browser have a more decent scrollbar visualisation - there it would not harm as much. – citykid Mar 12 '17 at 11:33
  • It's a good question. I don't think it is possible using CSS. Since you are removing the header from the context of the document, there is no way to adjust the article position without knowing the exact height of the header. – Jackson Mar 12 '17 at 11:34
  • 1
    @Jackson - Yepp, I believe it is as you say. – citykid Mar 12 '17 at 11:38
  • @viktta, that does not work. – citykid Mar 12 '17 at 11:38

2 Answers2

0

It can easily done by setting the position fixed. Have a look CSS:

.ccsticky-nav {
  width: 100%;
  height: 60px; 
  position: fixed; 
  top: 0;
  background: #139ed8;
}

For more details you can see article and demo here http://codeconvey.com/create-simple-pur-css-sticky-header/

ashfaq ahmed
  • 76
  • 3
  • you assume a fixed height of the header, 60px. I assumed that the header's changing height adjusts to its content, not being fix. – citykid Aug 31 '18 at 19:15
-1

Yes, you can use sticky positioning. This should keep the header at the top of the page and allow its size to affect the flow of the page:

header {
    top: 0;
    position: sticky;
}

However, it does not yet have great browser support: http://caniuse.com/#feat=css-sticky

Anonymous
  • 11,748
  • 6
  • 35
  • 57
  • cool, interesting idea, have to try that. for my taste, browser support for sticky is pretty good and there are polyfills that do not work as smooth as native, but are good enough to make pages in such browsers at least viewable. – citykid Apr 13 '17 at 07:34
  • thx but your answer misses the core of the question: "and a well behaving article behind it". – citykid May 19 '17 at 18:48