Html 使 iframe 为其容器的 100% 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28986339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make an iframe to be 100% width of its container
提问by Higeath
Okay so I would like this iframe to fill 100% of it's parent div which is wrapper with width 900 px and for some reason I'm unable to get this done
好的，所以我希望这个 iframe 填充它的父 div 的 100%，它是宽度为 900 px 的包装器，由于某种原因我无法完成这项工作
HTML
HTML
<fieldset>
<legend>Random Patch:</legend>
<iframe src="../../index.php?Patch_No='.$patches[$patch].'" frameborder="0" ></iframe>
</fieldset>';
CSS update the syntax is like that in code but still doesn't work I got confused with html for a second here is how it looks: http://i.imgur.com/9Jv5sFz.png
CSS 更新语法与代码中的语法类似，但仍然不起作用我对 html 感到困惑一秒钟，这里是它的外观：http: //i.imgur.com/9Jv5sFz.png
iframe {
width: 100%;
height: 500px;
}
UPdate 2 whole html
更新 2 整个 html
<body>
<div id="wrapper">
<header>
<div id="menu"> <a href="new_patch/new_champions.php" id="new">NEW</a>
<!-- Editing patches still in works href="edit_patch.php" -->
<a id="edit" style="color: grey;" alt="Edit" title="Disabled still in works.">EDIT</a>
<a href="delete_patch.php" id="delete">DELETE</a>
<a href="logout.php" id="logout">LOGOUT</a>
</div>
</header>
<div id="sitelive">
<?php
//Generating random patch from DB
$sql="SELECT Patch_No FROM info";
$result=$ conn->query($sql);
$patches=$result->num_rows;
if($patches!=0) {
$patch = rand(1, $patches);
$i = 1;
$patches = array();
while($data=$result->fetch_assoc()){
$patches[$i] = $data['Patch_No'];
$i+=1;
}
echo '
<fieldset>
<legend>Random Patch:</legend>
<iframe src="../../index.php?Patch_No='.$patches[$patch].'" frameborder="0" height="500" width="100%" scrolling="no"></iframe>
</fieldset>';
} ?>
</div>
</div>
</body>
采纳答案by G.L.P
Change your CSS like this: Updated Demo
像这样更改您的 CSS：更新演示
iframe {
width:100%;
height:500px;
}
fieldset, legend {
margin:0;
padding:0;
width:100%;
height:100%;
}
HTML:
HTML：
<fieldset>
<legend>Random Patch:</legend>
<iframe src="../../index.php?Patch_No='.$patches[$patch].'" frameborder="0"></iframe>
</fieldset>
Hope this is what you want..
希望这是你想要的..
回答by Albin
Your CSS syntax seems to be faulty
你的 CSS 语法似乎有问题
I think this will solve it:
我认为这将解决它：
iframe {
width:100%;
height:500px;
}
