2016-09-10 70 views
1

我想插入一個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>

+0

你堅持的重疊或有其他問題? –

+0

「有輕微問題」 - 這些問題是什麼? – Quentin

+0

對不起,我認爲這將是顯而易見的,我有改變大小和刪除邊界的問題,但Yann答案幫助,謝謝你們! –

回答

0

這部分:

<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%; 
} 
+0

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