DIVにiframeを挿入する

レイアウトのためにDIVボックスにiframeを挿入しようとしていますが、問題があります...私はそれを見てみましたが、まだ少し問題があり、残りの 'help'にjavascriptが含まれています私は本当に避けたい。DIVにiframeを挿入する

問題はここにある---> [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>

出典

2016-09-10 R Piper

は、あなたが重複して立ち往生しているか、別の問題があります？ –

「少し問題がある」 - その問題は何ですか？ – Quentin

申し訳ありませんが、私は大きさを変更して境界線を取り除くことに問題がありましたが、Yannの回答は助けになりました。 –

この部分：

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

を削除することができます。

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

あなたが本当にしたい場合は：それは親コンテナのサイズに合うように

次に、あなたは、あなたのstyle.cssに100％の幅とiframeに100％の高さを追加する必要がありますあなたがトップにコピーしたdivに入れたスタイルを保持しておけば、それを.nixiesboxに追加することもできますが、正直に言えば、ページを同じにした後、必要ではないと控除しました。

フル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%; 
}

出典

2016-09-10 13:54:49

ありがとう、私は今どこが間違っていたのか、私は何をしなければならないかを見ています^ _ ^ –

答えて

関連する問題