显示DIV和iframe水平

能否请您给以下一个HTML代码？显示DIV和iframe水平

我需要显示div和iframe水平拟合整个页面。但我需要div是固定大小（100像素）和iframe适合剩余的空间。

div+iframe

感谢

来源

2012-07-30 Timofei Davydik

你不使用任何javacsript或jQuery的？ – Uttara 2012-07-30 13:29:55

@Uttara更好的尝试CSS第一个使用jQuery之前，但如果它是一个快速的工作绝对是一个更好的方式去 – 2012-07-30 14:00:51

@Aram科恰良那好吧，但是你的iframe不配合到剩余空间，而其超越窗口宽度。希望你可以看到下面 – Uttara 2012-07-30 14:06:42

http://jsfiddle.net/gZNKk/1/

<html><head> 
    <style> 
     body, html { 
      height: 100%; 
      width: 100%; 
      padding: 0; 
      margin: 0; 
     } 
     #left { 
      float: left; 
      width: 100px; 
      background: blue; 
      height: 100%; 
     } 
     #right { 
      width: auto; /* This is the default */ 
      float: none; 
      margin-left: 100px; 
      background: red; 
      height: 100%; 
     } 
     #right-iframe { 
      background: yellow; 
      width: 100%; 
      height: 100%; 
     } 
    </style> 
</head> 
<body> 
<div id="left"></div> 
<div id="right"> 
    <iframe id="right-iframe"></iframe> 
</div> 
</body></html>

编辑：固定在右边多余的空格导致滚动条出现。

来源

2012-07-30 13:24:07

如果您能够使用绝对定位，我喜欢@ Dipaks的简单方法。 – 2012-07-30 13:26:21

Fiddle

CSS

div{ border: 1px solid #f00; width: 100px; position: absolute; left: 0; top: 0;} 
iframe{ width: 100%; margin: 0 0 0 100px;}

HTML

<div>hi</div> 
<iframe src="http://www.google.com/"></iframe>

编辑：

为了避免水平滚动条在%定义宽度两个元素 - Updated Fiddle

来源

2012-07-30 13:21:56 Dipak

尼斯砍... :) – 2012-07-30 13:26:53

但iframe要超越的剩余空间。我的意思是水平滚动条添加 – Uttara 2012-07-30 13:27:32

是啊，我没有注意到。设置边距和填充不能100％宽度，因为它会增加宽度。我们想要的是100％ - 100px！ :) – 2012-07-30 13:59:39

CSS：

#content-wrapper { 
width: 100%; 
overflow:hidden; 
} 

#content-left { 
width: 49.5%; 
min-height: 100%; 
float: left; 
border-right: solid 1px #A9D0D6; 
} 

#content-right { 
width: 49.5%; 
min-height: 100%; 
float: right; 
}

HTML：

<div id='content-wrapper'> 
    <div id='content-left'></div> 
    <div id='content-right'><iframe src="http://www.google.com"></div> 
</div>

宽度你C一个调整，无论你需要什么。

来源

2012-07-30 13:22:26

试试这个，

http://jsfiddle.net/anglimass/UUmsP/15/

来源

2012-07-30 13:28:48 anglimasS

显示DIV和iframe水平

回答

相关问题