HTML 5
structure when dealing with custom scrollbar

Question

I'm making a "semantic" html5 model for all the articles in a website. This is what could be great :

<article>
<header>
    <h2 id="title">MAIN TITLE</h2>
    <h3 id="sub-title">SECOND TITLE</h3>
    <img src="img.jpg" alt="article image"/>
</header>

<section id="main"><!-- use of section tag is optional here -->
    <p>ARTICLE TEXT</p>
</section>

<footer>
    <time datetime="2012-02-02">2 février 2012</time>
    <span class="tags-label">Mots-clef :</span>
    <h4 id="tag1">TAG 1</h4>
    <h4 id="tag2">TAG 2</h4>
</footer>
</article>

But I want <header> and <section id="main"> to be ONE scrollable block at the top of the page while footer will be fixed at the bottom. I use a custom scrollbar (sly.js) which needs some extra wrapper divs. So I must have something like that :

<article>
<div id="first-scrollbar-wrapper"><div id="second-scrollbar-wrapper">
<header>
    <h2 id="title">MAIN TITLE</h2>
    <h3 id="sub-title">SECOND TITLE</h3>
    <img src="img.jpg" alt="article image"/>
</header>

<section id="main">         
    <p>ARTICLE TEXT</p>
</section>      
</div></div>

<footer>
    <time datetime="2012-02-02">2 février 2012</time>
    <span class="tags-label">Mots-clef :</span>
    <h4 id="tag1">TAG 1</h4>
    <h4 id="tag2">TAG 2</h4>
</footer>
</article>

QUESTION : Is it acceptable? Don't you think the extra wrapper divs are "breaking" the semantic flow?

If you are marking up a document using HTML5 sectioning elements, you know you can use `
` in place of `
`, don't you? — Rounin, Jan 31 '16 at 11:51
Thanks, good idea! But you can read here -> https://www.w3.org/TR/html5/grouping-content.html that : "Authors must not include the main element as a descendant of an article, aside, footer, header or nav element." — Rémi Levassor, Feb 01 '16 at 11:51
Ah, okay. That's good to know. Anyway, I have stuck with `
` in the solution I have proposed below. Though on second thoughts, there are two articles, so it ought to be `
`... — Rounin, Feb 01 '16 at 12:00
...or `
` withoud id or class or ...nothing at all:) in MY case, this a wrapper for styling the main text (special background etc.). So i needed this `
` and `
` seemed to be semantically relevant instead of `
` so I used that. — Rémi Levassor, Feb 01 '16 at 12:23
It's worth pointing out that `
` is not required to be inside `
`, and you can have multiple `
` and `
` elements per page. — TylerH, Feb 01 '16 at 14:59
Good point tylerH. In MY case, the footer contains stuff about THIS article. That's why I put it inside article. But you're entitely right. — Rémi Levassor, Feb 02 '16 at 01:04

Rounin · Accepted Answer · 2016-02-02T01:27:17.440

But I want <header> and <section id="main"> to be ONE scrollable block at the top of the page while footer will be fixed at the bottom

You can declare

position: fixed;

for the <footer>.

This will obviate the need to surround <header> and <section id="main"> (or <main>) with a container <div>.

Edit:

I've just realised this doesn't work.

You'd be entirely forgiven for imagining that position:fixed works in exactly the same way as position:absolute.

ie. If an element with position:fixed has a parent with position:relative, the contained element will be fixed relative to its container.

But it isn't - and apparently, this is a perennial frustration.

So... here's a javascript to fix the problem and to enable

position:fixed-relative-to-parent

Example:

function fixFooter(article) {
var footer = article.getElementsByTagName('footer')[0];
var articleScrollTop = article.scrollTop;
var articleHeight = parseInt(window.getComputedStyle(article).getPropertyValue('height'));
var footerHeight = parseInt(window.getComputedStyle(footer).getPropertyValue('height'));
footerHeight += parseInt(window.getComputedStyle(footer).getPropertyValue('padding-top'));
footerHeight += parseInt(window.getComputedStyle(footer).getPropertyValue('padding-bottom'));
footerHeight += parseInt(window.getComputedStyle(footer).getPropertyValue('border-top-width'));
footerHeight += parseInt(window.getComputedStyle(footer).getPropertyValue('border-bottom-width'));

var footerTopPosition = articleScrollTop + articleHeight - footerHeight;
var footerTop = footerTopPosition + 'px';
footer.style.top = footerTop;
}

function initialiseArticlesFunction(i) {
    return function(){
        var article = document.getElementsByTagName('article')[i];
        article.addEventListener('scroll',function(){fixFooter(article);},false);
    }
}

function initialiseArticles() {
 var initialiseArticles = [];
    var articles = document.getElementsByTagName('article');
    for (var i = 0; i < articles.length; i++) {
     var footer = articles[i].getElementsByTagName('footer')[0];
        if (window.getComputedStyle(footer).getPropertyValue('position') === 'fixed') {
        footer.classList.add('fixed-relative-to-parent');
        fixFooter(articles[i]);
        }
        initialiseArticles[i] = initialiseArticlesFunction(i);
        initialiseArticles[i]();
    }
}

window.addEventListener('load',initialiseArticles,false);

article {
position:relative;
display:inline-block;
margin: 0 60px 0 0;
padding:0;
border: 2px solid rgb(127,127,127);
width: 220px;
height: 400px;
overflow-y: scroll;
}

article footer {
display:block;
position: fixed;
width: 191px;
height: 120px;
padding:6px;
background-color: rgb(227,227,0);
}

.fixed-relative-to-parent {
position: absolute;
left: 0;
}

<article>
<header>
    <h2 id="title">MAIN TITLE</h2>
    <h3 id="sub-title">SECOND TITLE</h3>
    <img src="img.jpg" alt="article image"/>
</header>

<section id="main"><!-- use of section tag is optional here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>p>

<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>

<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>

<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>

<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>
</section>

<footer>
    <time datetime="2012-02-02">2 février 2012</time>
    <span class="tags-label">Mots-clef :</span>
    <h4 id="tag1">TAG 1</h4>
    <h4 id="tag2">TAG 2</h4>
</footer>
</article>

<article>
<header>
    <h2 id="title">MAIN TITLE 2</h2>
    <h3 id="sub-title">SECOND TITLE 2</h3>
    <img src="img.jpg" alt="article image 2"/>
</header>

<section id="main"><!-- use of section tag is optional here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>p>

<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>

<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>

<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>

<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>
</section>

<footer>
    <time datetime="2012-02-02">2 février 2012</time>
    <span class="tags-label">Mots-clef :</span>
    <h4 id="tag1">TAG 1</h4>
    <h4 id="tag2">TAG 2</h4>
</footer>
</article>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>

<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>

<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>

<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>

<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>

<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>

<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>

<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>

<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non bibendum neque. Nam fringilla sit amet turpis at ultrices. Cras laoreet, justo id varius malesuada, orci dui volutpat dolor, quis varius sapien ligula sed lectus. Proin posuere facilisis orci. Maecenas condimentum fermentum purus ut porttitor. Quisque placerat ullamcorper urna, a tristique magna tempus et. Praesent rutrum sit amet quam ut eleifend. Integer tempor mauris ac orci faucibus malesuada. Nulla facilisi. Sed odio velit, iaculis in facilisis quis, sagittis eu erat.</p>

<p>Fusce ullamcorper varius ornare. Duis scelerisque molestie venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget dui commodo purus cursus luctus id id arcu. Quisque cursus euismod purus, vitae malesuada magna vestibulum at. Etiam dictum purus ac dui viverra, non vulputate arcu iaculis. Quisque eget commodo eros.</p>

<p>Nunc vel est eros. Maecenas commodo massa felis, sit amet feugiat neque imperdiet a. Curabitur non ligula posuere, condimentum orci nec, pulvinar metus. Suspendisse faucibus massa quis ex suscipit malesuada. Integer facilisis lacus vitae odio dapibus, et ultrices massa euismod. Nam ipsum ante, molestie ac accumsan id, interdum vitae orci. Aenean accumsan turpis ante, ut lobortis mi dapibus sed. Etiam magna urna, vehicula a mauris ac, aliquet vestibulum sapien. Sed eu nulla fringilla, lacinia libero ac, vestibulum velit. Sed sed lectus augue.</p>

<p>Pellentesque facilisis fermentum leo sit amet vehicula. Sed posuere neque a nibh lobortis egestas. Vivamus non massa ut ligula viverra volutpat nec non mi. Ut lacinia viverra ligula, sit amet placerat arcu egestas at. Suspendisse nec dui non felis ultrices suscipit pretium id erat. Aenean in mauris in magna pharetra vehicula non id elit. Maecenas eu urna fermentum, placerat ligula vitae, volutpat metus. Nullam aliquet nec justo at elementum. Proin gravida scelerisque faucibus. Duis dignissim justo rutrum lorem vestibulum, ut cursus dui efficitur. Donec vitae mollis quam. Donec maximus ipsum vel mi pulvinar molestie.</p>

<p>Fusce facilisis pharetra nulla nec imperdiet. Sed sit amet vulputate massa. Etiam semper arcu quis venenatis ornare. Suspendisse rhoncus libero tortor, sit amet ullamcorper mi elementum sit amet. Etiam eu tortor lacus. Nam ut enim nec dui ultricies auctor. Maecenas semper felis sit amet posuere tempus. Suspendisse volutpat vehicula nisi, vel consequat erat malesuada vitae. Fusce tempus lectus at lectus pretium ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer at accumsan sem. Donec semper nibh cursus posuere fringilla.</p>

Thanks for this! This is great. Just one weird behaviour (on ffox 43): when scrolling down one section, one can still scroll even when the text is finished (the scrollbar shrinks and the scrolling seems infinite). — Rémi Levassor, Feb 01 '16 at 12:01
Ha! You're right. I did not notice that. I'll have to look into that. — Rounin, Feb 01 '16 at 12:03
I could use that! The extra wrapper divs for sly.js are : first whith height fixed and overflow hidden and a child with position relative (for the text to move). So with your technique I only have to wrap `
` in one fixed height extra div (the "first" in my example). So, if you answered like that, you do think that having extra divs in `
` is NOT ok ? — Rémi Levassor, Feb 01 '16 at 12:10
I don't think it's bad to have the extra `
`s if you really need them. But I do think it's satisfying to omit them, if that's possible. — Rounin, Feb 01 '16 at 12:21
I spent ages trying to figure out what was causing that infinite scrolling bug you found. I cracked it!! The script wasn't taking into account the top and bottom padding of the `
`... so every time you scroll down (which repositions the `
`) the bottom of the `
` still extends below the visible area... meaning you can (always) scroll down even further. I have edited the script above and fixed the bug. — Rounin, Feb 01 '16 at 14:40
For some info on `position: fixed` in the various browsers, [this answer](http://stackoverflow.com/questions/28576291/positionfixed-element-within-a-positionrelative-parent-which-browser-renders/28576596#28576596) might shed some more light re: how containing blocks are determined. But it's best to remember `position: fixed` as being in a fixed position relative to the *viewport*, and `position: absolute;` as being absolutely always in the same spot of the document. — TylerH, Feb 01 '16 at 14:51
Can you link to an example of sly.js, @Rémi? I might be able to mod it so that it works with the setup above. (No guarantees, but I might...) — Rounin, Feb 02 '16 at 01:42
Hey Rounin, here is what I want to have : https://jsfiddle.net/gmfvs89h/2/ But don't spend too much time, you've done already a lot for me:) thanks — Rémi Levassor, Feb 02 '16 at 11:20
As you see, sly applies `overflow:hidden` on first wrapper and let scrolling by applying `transform: translateY(XXXpx)` on second wrapper (XXX change when users scrolls). At the end the only small "issue" with your technique of "fake fixed footer" is for styling (having round corners, space and borders beetwen main text and footer...) The easy way would be, as Tayler says, to put `
` outside `
`... but that's too easy:) — Rémi Levassor, Feb 02 '16 at 11:42
small update : I just figured out that sly works fine even **without position:relative** on second wrapper : https://jsfiddle.net/gmfvs89h/5/ — Rémi Levassor, Feb 02 '16 at 12:02

HTML 5 structure when dealing with custom scrollbar

1 Answers1

HTML 5
structure when dealing with custom scrollbar