html - 保持左侧菜单固定为 100% 整页高度？

Question

我正在尝试编写一个网站，其中有一个左侧菜单栏，内容在右侧。内容和左侧菜单栏都应该可以单独滚动。

我遇到的问题是:

• 内容滚动时左侧菜单栏未覆盖 100% 的页面
• 当页面垂直调整大小时，“页脚”(订阅/联系)不会停留在底部

有人能提供一些意见吗？

代码在这里:http://codepen.io/anon/pen/rVXErO

CSS:

* {
                margin:0 auto;
                padding:0px;
            }

            html, body {
                margin: 0 auto;
                padding:0px;
                min-height: 100%;
                height: 100%;
            }

            /*Main container for body*/
            .container {
                position: relative;
                display: table;
                min-height: 100%;
                height: 100%;
                width:100%;
            }

            .container > div {
                display: inline-block;
                vertical-align: top;
            }

            .leftmenu {
                position: relative;
                width: 22%;
                min-height: 100%;
                margin-left: 0px;
                height; 100%;
                z-index: 99;
                background-color:#28aadc;
                box-shadow: 2px 0px 30px 4px;
                overflow: auto;
            }

            .leftmenu > h1 {
                font-size: 45px;
                width: auto;
                color:white;
                text-align: center;
                font-family: 'arkhip';
                padding-top: 10px;
            }

            .leftmenu .social {
                position: relative;
                color:#00648c;
                text-align: center;
                margin-top: 10px;
                margin-bottom: 35px;
            }

            .leftmenu .social .fa {
                font-size: 20px;
                margin-left: 3px;
                margin-right: 3px;
            }

            .leftmenu .social .fa:hover {
                color:white;
                cursor: pointer;
            }

            .leftmenu .nav {
                position: relative;
                height: auto;
                padding-bottom: 12px;
            }

            .leftmenu .nav ul {
                height: auto;
                width: auto;
                text-align: center;
            }

            .leftmenu .nav ul li {
                width: 100%;
            }

            .leftmenu .nav ul li > a {
                margin-top: 5px;
                width:80%;
                display: block;
                text-decoration: none;
                color:#00648c;
                font-family: 'arkhip';
                font-size: 15px;
                padding:5px;
            }

            .leftmenu .nav ul li > a:hover {
                color:white;
            }

            .leftmenu .footer {
                position: absolute;
                bottom:0px;
                border:1px solid red;
                width:100%;
                background-color:blue;
                padding-top: 12px;
            }

            .mainContent {
                display: table;
                position: relative;
                height: 100%;
                min-height: 100%;
                width:78%;
                margin:0 auto;
                margin-right: 0px;
            }

            #home {
                height: 100%;
                min-height: 100%;
                background-image: url(images/newyorkblurred.jpg);
                background-size: cover;
            }       

            #home > h1, #home > p {
                position: relative;
                text-align: center;
                top:50%;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                color:white;
                font-family: 'arkhip;'
            }

            #home > h1 {
                font-size: 100px;
                font-family: 'arkhip';
                margin:0 auto;
            }

            #home > p {
                text-align: center;
                margin:0 auto;
                font-family: 'arkhip';
                margin-top: -60px;
                font-size: 18px;
            }

            #gallery, #about, #contact, #videos {
                height: 100%;
                min-height: 100%;
            }

            #videos {
                background-color:black;
            }

            #about {
               background-color:aqua;
            }

            #gallery {
                background-color:red;
            }

            #contact {
                background-color:gray;
            }

            @media screen and (max-width:767px) {
                .leftmenu > h1 {
                    font-size: 80%;
                }
            }

HTML:

<div class="container">
            <div class="leftmenu">
                <h1>Sidebar</h1>

                <div class="social">
                    <span class="fa fa-facebook"></span>
                    <span class="fa fa-instagram"></span>
                    <span class="fa fa-twitter"></span>
                    <span class="fa fa-youtube"></span>
                    <span class="fa fa-vine"></span>
                    <span class="fa fa-tumblr"></span>
                    <span class="fa fa-google-plus"></span>
                    <span class="fa fa-linkedin"></span>
                </div>

                <div class="nav">
                    <ul class="navigation">
                        <li>
                            <a href="#home">Home</a>
                        </li>
                        <li>
                            <a href="#videos">Videos</a>
                        </li>
                        <li>
                            <a href="#gallery">Gallery</a>
                        </li>
                        <li>
                            <a href="#about">About</a>
                        </li>
                        <li>
                            <a href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>

                <div class="footer">
                    <p>Subscribe</p>
                    <p>Contact</p>
                </div>
            </div>

            <div class="mainContent">
                <div id="home">
                    <h1>It's Magic</h1>
                    <p>You just need to believe!</p>
                </div>

                <div id="videos">
                    <h1>Videos</h1>
                </div>

                <div id="gallery">
                    <h1>Gallery</h1>
                </div>

                <div id="about">
                    <h1>About</h1>
                </div>

                <div id="contact">
                    <h1>Contact</h1>
                </div>
            </div>
        </div>

Answer 1

使用position: fixed。

.leftmenu {
    position: fixed;
}

代码笔:http://codepen.io/anon/pen/eNqwLN