Material design 将左上角和右下角与材质设计对齐

我可能完全弄错了，但我试图创建一个网页，其中div1位于左上角，div2位于右下角（或end）。我想用材料设计的正确方法来做这件事。 我希望它是这样的（对ASCII艺术表示抱歉，但它很酷）

这是到目前为止的代码，但问题是我可以让它影响第一列上的对齐，但我不能在两个div上单独设置它们

<md-content layout="column" layout-fill>
    <div layout="column" flex="33"><H1>Welcome to My page</H1>
    </div>
    <div layout="row" layout-align="end end" flex="33">
        <div layout="column" layout-align="end end" flex="50">
                 <H3>Welcome to  my page</H3>
        <p>This is my page, there are many like it <bold>But this page is mine</bold></p>

        <ul>
            <li>
                My page is my best friend
            </li><li>
                I must master its code
            </li><li>
                like I must master my life
            </li>
        </ul>
        </div>
    </div>
</md-content>

欢迎来到我的页面
欢迎来到我的页面
这是我的网页，有很多人喜欢它，但这是我的网页



我的网页是我最好的朋友

我必须掌握它的密码

就像我必须掌握我的生活一样

根本不确定JS小提琴是否能工作，第一个位子能工作，但无法结束。这只是因为我们不知道屏幕有多大

这是一个简单的JS小提琴，材料设计正在进行中，我可以让flex工作，但不能让align工作

---

好的，对不起，我太傻了，材质设计仍然不知道高度，所以方法是设置高度（您可以使用javascript和窗口）将高度设置为900px（

style=“height:900px；”“

如下），一旦完成，它就可以工作了

<md-content layout="column" layout-fill style="height: 900px">
    <div layout="column" flex="33"><H1>Welcome to My page</H1>
    </div>
    <div layout="row" layout-align="end end" flex="33">
        <div layout="column" layout-align="end end" flex="50">
                 <H3>Welcome to  my page</H3>
        <p>This is my page, there are many like it <bold>But this page is mine</bold></p>

        <ul>
            <li>
                My page is my best friend
            </li><li>
                I must master its code
            </li><li>
                like I must master my life
            </li>
        </ul>
        </div>
    </div>
</md-content>

欢迎来到我的页面
欢迎来到我的页面
这是我的网页，有很多人喜欢它，但这是我的网页



我的网页是我最好的朋友

我必须掌握它的密码

就像我必须掌握我的生活一样

<md-content layout="column" layout-fill style="height: 900px">
    <div layout="column" flex="33"><H1>Welcome to My page</H1>
    </div>
    <div layout="row" layout-align="end end" flex="33">
        <div layout="column" layout-align="end end" flex="50">
                 <H3>Welcome to  my page</H3>
        <p>This is my page, there are many like it <bold>But this page is mine</bold></p>

        <ul>
            <li>
                My page is my best friend
            </li><li>
                I must master its code
            </li><li>
                like I must master my life
            </li>
        </ul>
        </div>
    </div>
</md-content>