CSS - 页面适应内容高度

Question

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

我想要的是 https://drive.google.com/file/d/0B5uH1-IgLRWvN0dteDRROGFkWHc/view

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

我怎样才能只使用 CSS 动态地做到这一点？有可能吗？

关注代码：

HTML：

    <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>

CSS：

    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;
    }

这里是fiddle

我什么都试过了，最小高度、最大高度、高度、100%、100vh、100vmin

有人可以帮助我吗？

Answer 1

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

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

注意：我修复了侧面的导航。
希望对你有帮助。