JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<div id="wrapper">

    <header>
        <div id="logo"></div>

        <nav>
            <ul>
                <li>About</li>
                <li>Menu</li>
                <li>Specials</li>
            </ul>
        </nav>
    </header>

    <div id="content">
        content <br> goes <br> here
    </div>

</div>

<footer>footer</footer>

CSS

html, body {
    height: 100%;
    background-color: yellow;
}

header {
    width: 100%;
    height: 150px;
    background-color: blue;
}



header nav ul li {
    display: inline;
    padding: 0 30px 0 0;
    float: left;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 0 -30px 0; /* the bottom margin is the negative value of the footer's height */
    position: relative;
}

#wrapper #content {
    background-color: pink;
    width: 400px;
    margin: 0 0 30px 100px;
    padding: 25px 30px 25px 30px;
    position: absolute;
    top:150px;
    bottom:0px;
}

footer {
    margin: -30px 0 0 0;
    width: 100%;
    height: 30px;
    background-color: green;
}