Question

所以我浏览了网站并注意到人们遇到了和我一样的麻烦。当我创建我的网站时，我是根据我的屏幕尺寸做的。当我使用其他计算机时，我注意到因为iFrame在px广告中不是百分比，所以它看起来不太好。

我被告知要解决这个问题，我需要做的就是放入我的CSS：height = 100％;。但是，无论我做什么，它都无法正常工作。我试图让CSS中的主体具有100％的高度，甚至在HTML文档中尝试它。

关于我做错的任何想法？这是代码：

html { 
  background: url(http://images.wikia.com/zelda/images    /f/ff/Hyrule_Castle_in_Twilight.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

  body{
      text-align:center;
      height: 100%;
  }

  a{
    color:black;
      text-decoration: none;
  }

  b{      
    border:3px solid;
    padding:0.2em 0.6em;
    background:#FFFF99;
    border-radius:25px;
    width:auto;
    }

  b:hover {background-color:gray;}

iframe{
    border:8px solid; 
    background-color:#FFFF99;
    }

和我的html：

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Twilight Princess: About</title>
    <link rel="stylesheet" type="text/css" href="ztp.css"/>
</head>
<body>

    <div class="content">
        <iframe src="about_info.html" name="content" width="70%" height="70%"></iframe>        
    </div>

    <div class="menu">
        <p>
        <b><a href="about.html">About</a></b>
        <b><a href="script.html">Full Script</a></b> 
        <b><a href="characters.html">Characters</a></b>    
        <img src="http://i.imgur.com/npVFj0O.gif" alt="yooooo"/> 
        <b><a href="graphs.html">Graphs</a></b>
        <b><a href="conclusion.html">Conclusion</a></b>
        <b><a href="download.html">Downloads</a></b>
        </p>
    </div>
</body>

THE HTML INSIDE THE FRAME:
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Twilight Princess: About</title>
        <link rel="stylesheet" type="text/css" href="about.css"/>
    </head>
    <body>
        <div>
            <h2>About</h2>

                 <p>The Twilight Princess project is an investigatory look into the video game fantasy world of Hyrule. 
                This iteration of the Zelda series features a rich culture of humans and different fantasy creatures,
                all of which are being affected by a dramatic and evil takeover from a Shadow Realm.</p>

            <h2>Research Question</h2>


                <p>Our invetigation is particularly one of language used throughout the story of Twilight Princess. 
                Language is one of many parts of life that shows how different people are affected by the unfamiliar events in their lives. 
                We are looking to see what types of language different characters are using, and how that changes throughout the game. 
                What characters are helping our silent hero and how? By analyzing and carefully tracking the race, gender, 
                and linguistic patterns, we will be able to see.</p> 
            <p>
                This project has been completed by: Ashley Bakaitus, Eleanor Bennett, and Daniel Brabander.  With special thanks to David Birnbaum and Jon Chumra.
            </p>

        </div>
    </body>
</html>

使用CSS：

html{
    font-family:"Times New Roman";
    font-size:20px;
    }

Answer 1

带走div.content，所以只有你的iframe留下（你没有将任何CSS分配到div.content，那为什么会这样？）。

将height: 100%添加到head。

Answer 2

问题是你已经为孩子（iframe）定义了一个百分比，它是100％的父母（.content），没有分配任何值。

我从iframe html中取出了高度和宽度

<iframe src="about_info.html" name="content"></iframe>

并将其添加到CSS中。子项是父项中定义的宽度和高度的100％：

iframe{
  height:100%;
  width:100%;
  border:8px solid; 
  background-color:#FFFF99;
} 
.content{
  height:70%;
  width:70%; 
  }

这是一个jsfiddle：http://jsfiddle.net/d43Cw/

如何将iFrame从px更改为％

2 个答案: