Question

我正在尝试将一个iframe插入到我的布局的DIV框中但是遇到了麻烦......我试着查找它但仍然有轻微的问题，其余的“帮助”涉及我真正想避免的javascript。

问题在这里---＆gt; [http://babywitch.altervista.org/Writing/SLITD/index.html]

body{

background-color: #B5BEC6
}

#header{
width: 1000%;
height: 60px;
position: absolute;
top:0px;
left:0px;
background-color: #C7DBE6;
border-bottom-style: dashed;
border-bottom-color: #ffffff;
border-bottom-width: 1px;

}

#Nixie{
width: 300px;
height: 50px;
position: absolute;
left: 225px;
top: 15px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 26px;
color: #ffffff;
}

.nixiesbox{
width: 500px;
height: 350px;
position: absolute;
left: 35px;
top: 70px;
background-color: #ffffff;
opacity: 0.5;
}

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://babywitch.altervista.org/Writing/SLITD/stylesheet.css">
  <title></title>
</head>
<body>

<div id="header"><div id="Nixie">Nixie Moon</div></div>
<div class="nixiesbox">
<div style="position:absolute; left:77; top:77; width:500; height:350; border-style: none;background:#;">

 <iframe src="http://www.google.com/" width="377" height="377" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border-width:2px; border-color:#333; background:#FFF; border-style:solid;">
 </iframe>

</div> </div>

</body>
</html>

Answer 1

这部分：

<div style="position:absolute; left:77; top:77; width:500; height:350; border-style: none;background:#;">

可以删除。

然后你必须在你的style.css中添加100％的宽度和100％的高度到iframe，以便它适合父容器大小：

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

如果您真的希望保留我在顶部复制的div中放置的样式，您可以将其添加到.nixiesbox，但老实说，删除后，页面是相同的，然后我扣除它不是＆＃ 39;必要。

完整的HTML：

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://babywitch.altervista.org/Writing/SLITD/stylesheet.css">
  <title></title>
</head>
<body>

<div id="header"><div id="Nixie">Nixie Moon</div></div>
<div class="nixiesbox">
<div style="background:#fff;">

 <iframe src="http://www.w3schools.com/" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border-width:2px; border-color:#333; background:#FFF; border-style:solid;">
 </iframe>

</div>

</body>
</html>

完整的CSS：

body{

background-color: #B5BEC6
}

#header{
width: 1000%;
height: 60px;
position: absolute;
top:0px;
left:0px;
background-color: #C7DBE6;
border-bottom-style: dashed;
border-bottom-color: #ffffff;
border-bottom-width: 1px;

}

#Nixie{
width: 300px;
height: 50px;
position: absolute;
left: 225px;
top: 15px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 26px;
color: #ffffff;
}

.nixiesbox{
width: 500px;
height: 350px;
position: absolute;
left: 35px;
top: 70px;
background-color: #ffffff;
opacity: 0.5;
}

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

将iframe插入DIV

1 个答案: