Html & Css - Changing the Gravity

I'm building a website where the elements are really only at the bottom. I want my vertical starting place to start at the bottom instead of the top, and I want to do this without taking those elements out of the normal flow of the page (So no absolute positioning) so that the position of one element can depend on the position of the other. How do I do this? Here's a visual explanation of the 'elements at the bottom' thing. https://i.sstatic.net/OrPtt.jpg

    <head>
    <style>
        body {
            background: url('Index-Background.jpg') no-repeat center center fixed;
            background-size: cover;
        }
        section {
            margin-left: 2%;
        }
        nav {
            margin-bottom: 6.66%;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <h1>The Great Composers</h1>
            <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a pie\sum dolor sit amet..", comes from a line in section 1.10.32.</div>
        </section>
        <nav>
            <ul>
                <li><a href="#0">Gershwin</a></li>
                <li><a href="#0">Debussy</a></li>
            </ul>
        </nav>
    </main>
</body>

Solution

Well, there are some workarounds. You can do something like this,

html, body {
  height: 100%;
}
body {
  display: table;
}
main {
  display: table-cell;
  vertical-align: bottom;
}

See the working example: https://jsfiddle.net/L1w9m3mz/