From a39441893b0de9f7641411a05293b9d383cc334f Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 14 Jul 2017 02:11:33 +0200
Subject: [PATCH] fix(card): prevent content from overlapping footer (#5583)

* Prevents content from overlapping the `md-card-footer` component by making the footer `position: static`.
* Uses content projection to ensure that the footer will always be at the bottom of a card.

Fixes #5486.
---
 src/lib/card/card.html |  1 +
 src/lib/card/card.scss | 19 +++++++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/lib/card/card.html b/src/lib/card/card.html
index 6dbc74306383..d26c09f7bd43 100644
--- a/src/lib/card/card.html
+++ b/src/lib/card/card.html
@@ -1 +1,2 @@
 <ng-content></ng-content>
+<ng-content select="md-card-footer, mat-card-footer"></ng-content>
diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss
index 8a80c5d5a81d..2e1b2f8b6fb8 100644
--- a/src/lib/card/card.scss
+++ b/src/lib/card/card.scss
@@ -62,11 +62,12 @@ $mat-card-header-size: 40px !default;
 }
 
 .mat-card-footer {
-  position: absolute;
-  width: 100%;
-  min-height: 5px;
-  bottom: 0;
-  left: 0;
+  // The negative margins pulls out the element, countering the padding
+  // to get the footer to be flush against the side of the card.
+  $margin: -$mat-card-default-padding;
+
+  display: block;
+  margin: 0 $margin $margin $margin;
 }
 
 .mat-card-actions {
@@ -154,6 +155,11 @@ $mat-card-header-size: 40px !default;
     margin: -8px 0 0 0;
   }
 
+  .mat-card-footer {
+    margin-left: -16px;
+    margin-right: -16px;
+  }
+
 }
 
 // FIRST/LAST CHILD ADJUSTMENTS
@@ -166,7 +172,8 @@ $mat-card-header-size: 40px !default;
 
 // last els in mat-card-content and mat-card can't have their default margin-bottoms (e.g. <p> tags)
 // or they'll incorrectly add to card's bottom padding
-.mat-card > :last-child, .mat-card-content > :last-child {
+.mat-card > :last-child:not(.mat-card-footer),
+.mat-card-content > :last-child:not(.mat-card-footer) {
   margin-bottom: 0;
 }