Question

<body>
    <div layout="column" flex>
        <div>
            <h2>Hello</h2>
        </div>
        <div layout="row">
            <div flex="30">
                <md-content>
                    //some code     
                </md-content>
            </div>
            <div flex="70">
                //some code
            </div>
        </div>
    </div>
</body>

我想要＆＃34; md-content＆＃34;的内容填补屏幕高度的其余部分。如果我写＆＃34; layout-fill＆＃34;，md-content的大小正好是屏幕大小，但由于第一个嵌套div，其中包含h2，因此网站比我的屏幕更高。< / p>

Answer 1

如果我理解你想要的是这样的东西：

---------------------
|       Hello       |
|--------------------
| div 30|    div 70 |
|       |           |
|       |           |
---------------------

这整个内容应该在没有任何滚动的情况下适合全屏，对吧？如果是这样：多个选项取决于您是要使用纯CSS还是使用材料库。

选项1：CSS

您可以考虑将初始div强制计算为calc（100vh - myDivSize）并弯曲行div

选项2：材料选项

http://embed.plnkr.co/T9vRQhbHDR5w2F0Lnu0R/preview检查这个plunker，请记住，主div上应用的100 vh只是为了吸引人的目的，不应该以这种方式在你的应用上使用。

角度布局需要很大的空间

1 个答案: