Question

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

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

＆＃13;

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%;}

＆＃13;

<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>

＆＃13;

我需要this structure中的功能，但使用id=rightcontent的div中的文字应该是iframe标记。你可以看到＆＃34;页脚＆＃34;如果标记div id=rightcontent（紫色）比屏幕高度短，则保持在底部。如果rightcontent长于屏幕高度，则页脚会推到页面底部。我需要相同但使用iframe。

Answer 1

您可以尝试将右侧内容和页脚的位置设置为相对位置，并使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>

Answer 2

尝试更改

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

到

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

Answer 3

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

将高度设置为您的要求和位置：绝对; 希望这会很好。如有任何疑问，请写评论

如何设置iframe min-height，使其从页眉到页脚或更长时间保持不变？

3 个答案: