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

2018-07-02 06:07:09

我有这个页面结构。我需要iframe标记来填充整个屏幕高度从页眉到页脚或更长（紫色部分）。到目前为止，它的高度有限。

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>

尝试改变

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

至

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

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

将高度设置为您的要求和位置：绝对; 希望这会工作得很好。对于任何查询，请写评论

您可以尝试将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/89915.html

上一篇: height so it stays from header to footer or longer?

下一篇: Disqus iframe grows to fit it's content, makes it hard to link to