使iframe的容器宽度为100%

时间:2015-03-11 12:13:56

标签: html css iframe

好的,所以我希望这个iframe能够填充100%的父div,它是宽度为900像素的包装器,出于某种原因,我无法完成这项工作

HTML

<fieldset>
  <legend>Random Patch:</legend>
  <iframe src="../../index.php?Patch_No='.$patches[$patch].'" frameborder="0" ></iframe>
</fieldset>';

CSS更新语法就像代码中的那样,但仍然不起作用我和html混淆了一秒钟就是它的样子:http://i.imgur.com/9Jv5sFz.png

iframe {
   width: 100%;
   height: 500px;
}

UPdate 2 full 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>

2 个答案:

答案 0 :(得分:4)

更改您的CSS: Updated Demo

iframe {
    width:100%;
    height:500px;
}
fieldset, legend {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

HTML:

<fieldset>
    <legend>Random Patch:</legend>
    <iframe src="../../index.php?Patch_No='.$patches[$patch].'" frameborder="0"></iframe>
</fieldset>

希望这是你想要的......

答案 1 :(得分:0)

您的CSS语法似乎有问题

我认为这会解决它:

iframe {
  width:100%;
  height:500px;
}