iframe 맞춤 : footer 위의 공백을 제거하려면 어떻게해야합니까?

헤더, 메뉴 프레임, 바디 프레임 및 바닥 글의 네 가지 iframe을 사용하고 있습니다. 메뉴 프레임과 바디 프레임은 나란히 배치됩니다. 바닥 글과 메뉴 프레임 및 바디 프레임 사이에는 공백이 있습니다. 어떻게 제거합니까?iframe 맞춤 : footer 위의 공백을 제거하려면 어떻게해야합니까?

CSS :

iframe{ 
    border:0; 
    margin:0; 
} 
iframe.menuframe{ 
    border:0; 
    margin:0; 
    width:183px; 
} 
iframe.bodyframe{ 
    border:0; 
    margin:0; 
    width:300px; 
}

HTML :

iframe{ 
    border:0; 
    margin:0; 
    display:block; 
}

그리고 당신의 menuFrame이를 사용하여 주요 IFRAME 스타일 (: 블록 추가 참고 표시)에 대한

<iframe name="header" src="Header.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; width:100%; height:110px;"></iframe> 
<iframe name="menuframe" src="Menu.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; height:590px;"></iframe> 
<iframe name="bodyframe" src="Home.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; height:590px;"></iframe> 
<iframe name="footer" src="Footer.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; width:100%; height:25px;"></iframe>

출처

2013-08-08 user2665607

1) 당신은 추가해야합니다

<style>iframe { display:block; } </style>

을 스타일 시트 또는 페이지 헤드. 이는 iframe이 기본적으로 인라인이기 때문입니다. 즉, 텍스트 기준선에 배치됩니다. 여기서 'a'의 하단은 끝나고 'y'의 하단은 끝나지 않습니다. 보고있는 차이는 텍스트 줄에서 디 센더를위한 공간입니다. 제거해야합니다.

2)는 속성을 추가해야합니다 : 당신의 iframe이 각

seamless='seamless'

을 : HTML5에, FRAMEBORDER이 더 이상 지원되지 속성이 없습니다.

3) 당신은 추가해야합니다 : 당신의 'menuframe'은 iframe에

float:left;

을 adiacent은 iframe이 오른쪽에 나타납니다 있도록.

이 변경 사항은 대부분의 브라우저에서 작동합니다.

그래서 코드는 다음과 같아야합니다

<!DOCTYPE html> 
<html> 
    <head> 
     <style>iframe { display:block; } </style> 
    </head> 
    <body style="margin:0;padding:0"> 
     <iframe name="header" src="Header.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="width:100%; height:110px;"></iframe> 
     <iframe name="menuframe" src="Menu.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="float:left;height:590px;"></iframe> 
     <iframe name="bodyframe" src="Home.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="height:590px;"></iframe> 
     <iframe name="footer" src="Footer.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="width:100%; height:25px;"></iframe> 
    </body> 
</html>

참고 : 나는 특성을 몇 가지 쓸모없는 스타일을 제거했습니다. 솔루션의 일부는 이러한 답변으로 찍은 :

Remove border from IFrame

HTML: Strange space between iframe elements?

출처

2013-08-08 19:50:07

iframe에 display : table-cell을 사용했습니다. 그러나 그것은 사파리와 google 크롬에서 근무하지 않고 있었다. – user2665607

사용이 선언 (플로트 참고 : 왼쪽 추가) :

여기

<iframe name="menuframe" src="Menu.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; height:590px;float:left;"></iframe>

은 작업 예입니다, 다른 2 종류 iframe.menuframe 및 iframe.bodyframe는 효과가 없습니다 그런데 http://jsfiddle.net/tU8XN/1/ (신경 쓰지 누락 된 페이지에 대한 "페이지를 찾을 수 없음")

때문에이 형식 목표 클래스 선언이 아닌 요소의 이름.

출처

2013-08-08 19:42:32

오 전 = "... 프레임"클래스를 넣어 것을 잊었다! – user2665607

iframe 맞춤 : footer 위의 공백을 제거하려면 어떻게해야합니까?

답변

관련 문제