Html CSS-根据内容高度调整页面

我正在尝试创建一个适合动态内容的布局

我想要的是

https://drive.google.com/file/d/0B5uH1-IgLRWvN0dteDRROGFkWHc/view

但是，如果内容是动态的，并且比视口大，则左div会比内容小

如何仅使用CSS动态执行此操作？有可能吗

请遵循以下代码：

HTML:

这是

我什么都试过了，最小高度，最大高度，高度，100%，100vh，100V分钟

---

有人能帮我吗？

我不知道你想在这里实现什么，但我做了一些编码

这里是：jsfiddle.net/alem/z5eatg7b/

注意：我将导航装置固定在侧面。

---

希望它能对您有所帮助。

请在您的问题中发布您的代码。这不是我想要的吗。我希望导航保持与页面相同的高度而不被固定，我希望在此导航上创建一个菜单，此菜单可以大于用户窗口：(

    <nav>
        <h2>Test</h2>
    </nav>
    <header>
        Test
    </header>
    <content>
        <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a>
        <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a>
        <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a>
        <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a>
        <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a>
        <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a>
        <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a>
        <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a>
        <a href="#"><img src="http://2.bp.blogspot.com/-sEm9FgiMPbw/UI-pvvvC8wI/AAAAAAAABpo/L0kzBuQSePI/s1600/AngryRedBird.png"/></a>
    </content>
    <footer>
        Test
    </footer>
    <div class="clear"></div>

    html {
        padding:0;
        margin:0;
        height:100%;
    }
    body {
        padding:0;
        margin:0;
        height:100%;
    }
    nav {
        min-height:100%;
        background-color:red;
        float:left;
        width:16.67%;
    }
    header {
        min-height:5%;
        background-color:blue;
        float:left;
        width:83.33%;
    }
    content {
        min-height:95%;
        background-color:green;
        float:left;
        width:83.33%;
    }
    footer {
        min-height:5%;
        background-color:yellow;
        float:left;
        width:83.33%;
    }
    .clear {
        clear:both;
    }