Polymer outer

by AaronLayton

HTML

<script src="http://www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/core-icon-button/core-icon-button.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html">
    
<meta name="viewport" content="width=device-width, initial-scale=1">

<core-drawer-panel transition id="core_drawer_panel" touch-action>
    
    <core-header-panel drawer mode="standard" id="core_header_panel2">
      <core-toolbar id="core_toolbar2">
        <div id="div2">Menu</div>
      </core-toolbar>
      <section id="section22">
          Stuff
      </section>
    </core-header-panel>
    
    <core-header-panel main mode="standard" id="core_header_panel">
      <core-toolbar id="core_toolbar">
        <core-icon-button aria-label="menu" icon="menu" id="core_icon_button" onclick="document.querySelector('core-drawer-panel').togglePanel();"></core-icon-button>
        <div id="div">My App</div>
      </core-toolbar>
      <section id="section2">
          <iframe src="http://jsfiddle.net/AaronLayton/5d5159no/7/show/"></frame>
      </section>
    </core-header-panel>
    
</core-drawer-panel>

CSS

html,body,#core_header_panel {
    height:100%
}
body {
    margin:0;
    padding:0;
    font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
    font-size:14px;
}
iframe {
    border:none;
    width:100%;
    height:100%;
}

#core_toolbar,
#core_toolbar2{
    background: #4285f4;
    color: #F1F1F1;
    fill: #F1F1F1;
}

#section2 {
    height: 100%;
    background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
}
#core_header_panel2 {
    background:#fff;
}
#section22 {
    padding:15px;
}

JavaScript

setTimeout(function(){
    var newHeight = $("body").height() - $("#core_toolbar").height();
    $("#section2").height( newHeight );
}, 500)