MD Settings: Make subpage extend to bottom of page with no overscroll

chrome/browser/resources/settings/settings_page_css.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="settings_page/main_page_behavior.html">
 
 <dom-module id="settings-page-styles">
   <template>
     <style>
       :host {
         box-sizing: border-box;
         display: block;
         height: inherit;
         margin: 0 auto;
         max-width: calc(var(--settings-card-max-width) + 3 * 2px);
         min-width: 550px;
         position: relative;
         width: 96%;
       }
 
       :host(.showing-subpage) {
-        /* Set the height to the container height so the subpage scrolls. */
+        /* The subpage container should extend to the bottom of the page. */

[scottchen, 2017/02/07 22:55:10]

The comment was a little confusing. According to designer, the subpage shouldn't
scroll - the scroll should still be on the viewport (and is how it currently
works).

         height: 100%;
       }
 
       :host > div {
         height: inherit;
       }
 
       :host > div > :not(.expanded) {
         /* The margin and padding here are doing two things: make the total
          * separation 24px; and make scrollIntoView align the section header
          * with the top item in the side nav menu. Both things are desired
          * by Alan (bettes@). */
         margin-bottom: 3px;
       }
 
       .expanded {
         min-height: 100%;
       }
 
       .expanding,
       .collapsing {
         /* Must be lower than the cr-toolbar's z-index.
          * See settings_ui.html. */
         z-index: 1;
       }
     </style>
   </template>
 </dom-module>