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 /

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

CSS - 页面适应内容高度

1 个答案: