综合开发

How can I place 2 iframes next to each other?

微信扫一扫,分享到朋友圈

How can I place 2 iframes next to each other?

I need to create a page where I have 2 iframes next to each other with 100% height.

The left frame needs to have a fixed width of 140px and the right one needs to take the width of the rest of the screen. Keep in mind that both frames need to have 100% height.

Since there are different size screens I can’t set a fixed with on the right iframe as I want it to take all the screen after the first 140px;

I kinds got it to work while using precentage. But the problem with percentage is the the left menu sometime show very wide

I created a fiddle to show you what I have done so far

http://jsfiddle.net/mwg3j17d/16/

#main_block {
display: block;
width: 100% height: 100%;
}
#left_frame {
width: 25%;
}
#right_frame {
width: 75%;
}
#left_frame,
#right_frame {
float: left;
}
iframe {
box-sizing: border-box;
}
.b_footer {
padding: 10px;
width: 100%;
background-color: blue;
text-align: center;
color: white: font-weight: bold;
}
<div id="main_block">
<iframe id="left_frame" src=""></iframe>
<iframe id="right_frame" src=""></iframe>
</div>
<div class="b_footer">
Footer
</div>

As you can tell, there are couple of problems with my code.

  1. The footer background’s color for some reason is also showing where under the iframs.
  2. The second problem is that I am using 25% width for the left iframe where it should be set to 140px
  3. Finally, the height of the iframe is not taking the entire height of the screen.

How can I correct the problems mention above?

EDITED I also tried to use Table to get the job done but the left iframe does not have the correct width. Here is an updated Fiddle to show you http://jsfiddle.net/mwg3j17d/19/

You can use width: calc(100% - 140px)
to create your right column. Also, your .b_footer
style was too large (10px padding + 100% + 10px padding) because you didn’t specify box-sizing: border-box
, so I added it.

width: calc(100% - 140px)
html,body { margin:0; padding:0; }
html,body { margin:0; padding: 0; }
#main_block {
display: block; /* Useless, divs are display:block */
width: 100%;    /* Useless, display:block elements are width:100% by default */
height: 100%;   /* Fairly useless now, should take children's height */
font-size:0;    /* Force space between inline-block elements to be 0 */
}
#left_frame {
width: 140px;
}
#right_frame {
width: calc(100% - 140px);
}
#left_frame,#right_frame {
display: inline-block;
box-sizing: border-box;
height: calc(100vh - 50px);
}
.b_footer {
padding: 10px;
height: 50px;
background-color: blue;
text-align: center;
color: white;
font-weight: bold;
box-sizing: border-box;
}
<div id="main_block">
<iframe id="left_frame" src=""></iframe>
<iframe id="right_frame" src=""></iframe>
</div>
<div class="b_footer">
Footer
</div>

Re-Share: vtreat Data Preparation Documentation and Video

上一篇

Configuring SSL/TLS Connection Made Easy

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

How can I place 2 iframes next to each other&quest;

长按储存图像,分享给朋友