height so it stays from header to footer or longer?

I have this structure of page. I need the iframe tag to fill whole screen height from header to footer or longer (purple part). So far it has limited height.

http://jsfiddle.net/isadykov/s37z0pfu/39/

body, html, form {padding:0; margin:0; height:100%;}
#header, #footer{width:100%; background:#ccc; text-align:center;}
#header {height: 30px;}
#footer {height: 20px;}
#content{height: calc(100% - 30px);}
#leftMenu {width:200px; float:left; height:100%;}
#westNorth {width:200px; overflow-y:auto; position: fixed; top:30px;bottom:70px;background:aqua;}
#westSouth {width:200px; height:70px; position: fixed; bottom:0px;  background: pink;}
#rightcol {overflow-y:auto; height: 100%;  background:green;}
#rightcontent {min-height:100%; margin: 0 auto -20px;background:magenta;}
#push {height: 20px;}
#Mainpanel {width:99%; height:100%;}

<div id="header"> header content </div>
<div id="content">
  <div id="leftMenu">    
    <div id="westNorth">left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />
       left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />
    </div>
    <div id="westSouth">
       left bottom content<br />left bottom content<br />left bottom content<br />
    </div>     
  </div>
  <div id="rightcol">
    <div id="rightcontent">          
       <iframe id="Mainpanel" src="https://www.desmos.com/fourfunction"  ></iframe>    
      <div id="push" ></div>
    </div>
    <div id="footer"> footer content </div>
  </div>
</div>

---

Try to change

#Mainpanel {width:99%; height:100%;}

to

#Mainpanel {width:99%; height:100vh;}

---

#Mainpanel {width:99%; height:88%;position:absolute}
#footer{
  position:relative;bottom:0;
}

set the height as your requirement and position: absolute; Hope this will work fine. For any query please write comment

---

您可以尝试将rightcontent和footer的位置设置为relative，并将iframe设置为绝对值，以便能够扩展到其父高度和宽度。

body, html, form {padding:0; margin:0; height:100%;}
#header, #footer{width:100%; background:#ccc; text-align:center;}
#header {height: 30px;}
#footer {height: 20px; position: relative;}
#content{height: calc(100% - 30px);}
#leftMenu {width:200px; float:left; height:100%;}
#westNorth {width:200px; overflow-y:auto; position: fixed; top:30px;bottom:70px;background:aqua;}
#westSouth {width:200px; height:70px; position: fixed; bottom:0px;  background: pink;}
#rightcol {overflow-y:auto; height: 100%;  background:green;}
#rightcontent {min-height: 100vh; border: none; margin: 0 auto -20px;background:magenta; position: relative; overflow: hidden;}
#push {height: 20px;}
#Mainpanel {width:100%; height: 100%; position: absolute; display: block; overflow: hidden;}

<div id="header"> header content </div>
<div id="content">
  <div id="leftMenu">    
    <div id="westNorth">left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />
       left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />left top content<br />
    </div>
    <div id="westSouth">
       left bottom content<br />left bottom content<br />left bottom content<br />
    </div>     
  </div>
  <div id="rightcol">
    <div id="rightcontent">          
       <iframe id="Mainpanel" src="https://www.desmos.com/fourfunction"  ></iframe>    
    </div>
    <div id="footer"> footer content </div>
  </div>
</div>

链接地址: http://www.djcxy.com/p/89916.html

上一篇: Firefox 4和IE9不会在JSF应用程序中打开我生成的JasperReports

下一篇: 高度，所以它保持从页眉到页脚或更长？