DIV에 iframe 삽입하기

레이아웃에 문제가있는 DIV 상자에 iframe을 삽입하려고합니다 ...하지만 여전히 약간의 문제가있는 부분을 보았습니다. 나머지 'help'에는 javascript가 포함되어 있습니다. 나는 정말로 피하고 싶다. DIV에 iframe 삽입하기

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 대답이 도움이되었습니다. –

문제는 여기 ---> [http://babywitch.altervista.org/Writing/SLITD/index.html]

이 제품 :

<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

고맙습니다. 지금 내가 어디가 잘못 됐는지보아야합니다.^_ ^ –

DIV에 iframe 삽입하기

답변

관련 문제