CSS Sticky Header/Footer and Fully Stretched Middle Area

CSS Sticky Header/Footer and Fully Stretched Middle Area?

Can use absolute position for all 3 elements.

#header,#footer,#content { position:absolute; right:0;left:0}

#header{
   height:100px; top:0;
}
#footer{
  height:100px; bottom:0;
}
#content{
  top:100px;
  bottom:100px;
  overflow:hidden; /* use this if don't want any window scrollbars and use an inner element for scrolling*/
}

DEMO: http://jsfiddle.net/RkX8B/

Sticky header with %-height and 100% content sections

Possible solution:

I have wrapped all sections into 2 divs.

<div class="wrapper">//rest 90% of the page
    <div class="wrapper2">//100% of parent
        <section>
            <div class="container yellow">1</div>
        </section>
        <section>...
    </div>
</div>

CSS:

.wrapper {
    min-height:90%;
    height:auto !important;
    position:relative;
    top:10%;
}
.wrapper2 {
    height:100%;
    width:100%;
    position:absolute;
}

Also, add z-index:1; to header.

Updated fiddle here.

CSS flexbox: Header, main, footer layout. Main part collapsing in the middle

I don't know how you where trying to this method out, but it's working (now at least).

Here's a JSFiddle showing the layout - I added a subtle background-color to illustrate the stretch.

<header>header</header>
<main>main</main>
<footer>footer</footer>

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

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

header {
    height: 75px;
}

main {
    flex: auto;
    background-color: #ccc;
}

footer {
    height: 25px;
}

Stretching vertical layout with header and footer of static height in plain HTML/CSS

I believe this is what you are looking for

jsFiddle

Use margins to set the margin-top and margin-bottom of the middle <div> to -50px, or whatever the respective height of your desired header and the footer is.

Alternatively use this (relatively hacky) method if you want to add content to the middle part of the page.
jsFiddle

CSS: Properly align the edge of Section with Header and Footer

There are various approaches to do so.

Calc()
Flex Box (CSS3)
Grid System (CSS3)

I wrote you the correct form [ Flex Box ]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Project-1: Simple Layout</title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            * {
                border-style: hidden;
                border-width: 1px;
                box-sizing: border-box;
            }
            body {
                background-color: #2473f2;
                margin-right: 10%;
                margin-left: 10%;
                color: white;
                text-align: center;
                font-family: Arial, Helvetica, sans-serif;
            }
            header,
            nav,
            section,
            footer {
                border-style: solid;
                border-radius: 5px;
            }
            nav,
            section,
            footer {
                float: left;
            }
            nav,
            section {
                padding: 300px 0px;
            }
            nav {
                width: 200px;
                margin-right: 20px;
            }
            section {
                width: 1300px;
            }
            header,
            footer {
                padding: 20px;
            }
            header {
                margin-bottom: 20px;
            }
            footer {
                margin-top: 20px;
                width: 1540px;
            }
            /* just added */
            .main-body {
                display: flex;
                justify-content: space-between;
            }
        </style>
    </head>
    <body>
        <h1>Project-1: Simple Layout</h1>
        <div>
            <header>
                HEADER
            </header>
            <main class="main-body">
                <nav>
                    NAV
                </nav>
                <section>
                    SECTION
                </section>
            </main>
            <footer>
                FOOTER
            </footer>
        </div>
    </body>
</html>

Flexbox with fixed header and footer and scrollable content

You can do something like this:

html, body {

  margin: 0;

  height: 100%; /* can also use viewport units (height: 100vh) */

}

#container {

  display: flex; /* displays flex-items (children) inline */

  flex-direction: column; /* stacks them vertically */

  height: 100%; /* needs to take the parents height, alternative: body {display: flex} */

}

main {

  flex: 1; /* takes the remaining height of the "container" div */

  overflow: auto; /* to scroll just the "main" div */

}

section {

  height: 100%; /* takes the visible area of the "main" div */

  overflow: auto; /* recommended */

  border-bottom: 1px solid;

  background: lightgreen;

}

header {background: #f88}

section:last-child {border: none}

footer {background: lightblue}

<div id="container">

  <header>top</header>

  <main>

    <section>1st</section>

    <section>2nd</section>

    <section>3rd<br>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>

    </section>

    <section>4th</section>

    <section>5th</section>

  </main>

  <footer>bottom</footer>

</div>

Tailwind CSS list with Static header and footer with Scrollable Area in middle

h-screen and flex flex-1 is what you should be focusing on. See demo.

<div class="h-screen flex flex-col">
  <header class="flex h-10 bg-gray-200">Header</header>

  <div class="flex flex-1 bg-gray-100 overflow-auto">
    Long Content
  </div>

  <footer class="flex h-10 bg-gray-200">Footer</footer>
</div>

CSS Sticky Header/Footer and Fully Stretched Middle Area