將材質設計的左上角和右下角對齊

Question

我可能會弄錯這個，但嘗試創建一個網頁，其中div 1位於左上角，div 2位於右下角（或末端）。我想用材料設計以正確的方式做到這一點。 我希望它像這樣（爲ASCII藝術抱歉，但它是涼）

_____________33____50________________ 
|   |      | 
| 1  |      | 
|   |  _________________| 33 
-------------|  |    | 
|     |  2  | 
|     |    | 
|     |    | 
-------------------------------------- 
        50 

這裏是到目前爲止的代碼，但問題是，我可以得到它的影響在一列排列，但我着獨立設置它們放在兩個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小提琴和材料設計工作，而且我可以得到柔性的工作，而不是對準 https://jsfiddle.net/p02Ls1dh/3/

Answer 1

OK，對不起，我是愚蠢的，材料設計仍然沒有知道高度，所以做到這一點的方法是設置高度（可以使用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>