Set header and footer reveal.js presentation
<p>I want to set a header and footer in my presentation. I used the following issue as a starting point: <a href="https://github.com/hakimel/reveal.js/issues/806" rel="noreferrer">https://github.com/hakimel/reveal.js/issues/806</a> and <a href="http://www.ciges.net/revealjs_demo/#/" rel="noreferrer">http://www.ciges.net/revealjs_demo/#/</a></p>

<p>My current implementation gives the following output:
<a href="https://i.stack.imgur.com/LmmXr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LmmXr.png" alt="enter image description here"></a></p>

<p>Now as far as I have understand reveal.js uses <a href="https://github.com/hakimel/reveal.js#presentation-size" rel="noreferrer">fixed size for the presentation</a> by default with a width of 960px and height of 700px. This size is completely fine to me. However, I want the headers and footer not to be fixed in this window. They need to adapt to the actual screen size. That is to say, I want the left header to be aligned to the top left corner of the screen. Likewise for the other header and footers, see also the image. How can I achieve this? Currently it seems that my headers and footers are fixed within the default window (960x700).</p>

<p>I use the following code (index.html) with reveal.js 3.2.0</p>

<pre><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;

    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;

        &lt;title&gt;reveal.js – The HTML Presentation Framework&lt;/title&gt;

        &lt;meta name="description" content="A framework for easily creating beautiful presentations using HTML"&gt;
        &lt;meta name="author" content="Hakim El Hattab"&gt;

        &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
        &lt;meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"&gt;

        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"&gt;

        &lt;link rel="stylesheet" href="css/reveal.css"&gt;
        &lt;link rel="stylesheet" href="css/theme/simple.css" id="theme"&gt;

        &lt;!-- Code syntax highlighting --&gt;
        &lt;link rel="stylesheet" href="lib/css/zenburn.css"&gt;

        &lt;!-- Printing and PDF exports --&gt;
        &lt;script&gt;
            var link = document.createElement( 'link' );
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
            document.getElementsByTagName( 'head' )[0].appendChild( link );
        &lt;/script&gt;

        &lt;!--[if lt IE 9]&gt;
        &lt;script src="lib/js/html5shiv.js"&gt;&lt;/script&gt;
        &lt;![endif]--&gt;

        &lt;style type="text/css"&gt;
            .reveal div.header-left {
                position: absolute;
                top: 0;
                left: 0;
                padding: 0;
                margin: 0;
            }
            .reveal div.header-right {
                position: absolute;
                top: 0;
                right: 0;
                padding: 0;
                margin: 0;
            }
            .reveal div.footer-left {
                position: absolute;
                bottom: 0;
                left: 0;
                padding: 0;
                margin: 0;
            }
            .reveal div.footer-right {
                position: absolute;
                bottom: 0;
                right: 0;
                padding: 0;
                margin: 0;
            }
        &lt;/style&gt;

    &lt;/head&gt;

    &lt;body&gt;

        &lt;div id="hidden" style="display:none;"&gt;
            &lt;div id="header"&gt;
                &lt;div class="header-left"&gt;test header left&lt;/div&gt;
                &lt;div class="header-right"&gt;test header right&lt;/div&gt;
                &lt;div class="footer-left"&gt;test footer left&lt;/div&gt;
                &lt;div class="footer-right"&gt;test footer right&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="reveal"&gt;

            &lt;!-- Any section element inside of this container is displayed as a slide --&gt;
            &lt;div class="slides"&gt;
                &lt;section&gt;
                    &lt;h1&gt;Reveal.js&lt;/h1&gt;
                    &lt;h3&gt;The HTML Presentation Framework&lt;/h3&gt;
                    &lt;p&gt;
                        &lt;small&gt;Created by $x^2$ &lt;a href="http://hakim.se"&gt;Hakim El Hattab&lt;/a&gt; / &lt;a href="http://twitter.com/hakimel"&gt;@hakimel&lt;/a&gt;&lt;/small&gt;
                    &lt;/p&gt;
                &lt;/section&gt;

                &lt;section&gt;
                    &lt;h2&gt;Hello There&lt;/h2&gt;
                    &lt;p&gt;
                        reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
                    &lt;/p&gt;
                &lt;/section&gt;

                &lt;!-- Example of nested vertical slides --&gt;
                &lt;section&gt;
                    &lt;section&gt;
                        &lt;h2&gt;Vertical Slides&lt;/h2&gt;
                        &lt;p&gt;Slides can be nested inside of each other.&lt;/p&gt;
                        &lt;p&gt;Use the &lt;em&gt;Space&lt;/em&gt; key to navigate through all slides.&lt;/p&gt;
                        &lt;br&gt;
                        &lt;a href="#" class="navigate-down"&gt;
                            &lt;img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"&gt;
                        &lt;/a&gt;
                    &lt;/section&gt;
                    &lt;section&gt;
                        &lt;h2&gt;Basement Level 1&lt;/h2&gt;
                        &lt;p&gt;Nested slides are useful for adding additional detail underneath a high level horizontal slide.&lt;/p&gt;
                    &lt;/section&gt;
                    &lt;section&gt;
                        &lt;h2&gt;Basement Level 2&lt;/h2&gt;
                        &lt;p&gt;That's it, time to go back up.&lt;/p&gt;
                        &lt;br&gt;
                        &lt;a href="#/2"&gt;
                            &lt;img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);"&gt;
                        &lt;/a&gt;
                    &lt;/section&gt;
                &lt;/section&gt;

            &lt;/div&gt;

        &lt;/div&gt;

        &lt;script src="lib/js/head.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/reveal.js"&gt;&lt;/script&gt;

        &lt;script&gt;

            // Full list of configuration options available at:
            // https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                controls: false,
                progress: true,
                slideNumber: true,
                history: true,
                center: false, 
                transition: 'slide', // none/fade/slide/convex/concave/zoom
                math: {
                    mathjax: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js',
                    config: 'TeX-AMS_HTML-full'  // See http://docs.mathjax.org/en/latest/config-files.html
                },
                // Optional reveal.js plugins
                dependencies: [
                    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                    { src: 'plugin/zoom-js/zoom.js', async: true },
                    { src: 'plugin/notes/notes.js', async: true },
                    { src: 'plugin/math/math.js', async: true }
                ]
            });

        &lt;/script&gt;

        &lt;script src="//code.jquery.com/jquery-2.2.0.min.js"&gt;&lt;/script&gt;

        &lt;script type="text/javascript"&gt;
            var header = $('#header').html();
            if ( window.location.search.match( /print-pdf/gi ) ) {
                $('.slides &gt; section').prepend(header);
            } else {
                $('.slides').prepend(header);
            }
        &lt;/script&gt;

    &lt;/body&gt;

&lt;/html&gt;
</code></pre>