插入一個iframe到DIV

我想插入一個iframe到我的佈局的DIV框但有麻煩...我試着查找它，但仍然有輕微的問題，其餘的'幫助'涉及JavaScript我真的想避免。插入一個iframe到DIV

問題是在這裏---> [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:#;">

可以被刪除。

然後，你必須在你的style.css加100％的寬度和100％的高度的iframe，使之適合於父容器的大小：

iframe { 
    width:100%; 
    height: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

非常感謝，我現在看到我出錯的地方和我必須做的事^ _ ^ –

插入一個iframe到DIV

回答

相關問題