iFrame이 100 % 높이로 확장되지 않습니다.

나는 html 미만입니다. 그리고 iFrame이 나머지 화면을 100 % 표시하도록하겠습니다. 높이 속성에서 "100 %"와 "*"를 시도했지만 작동하지 않았습니다. 왜 그런가요? 감사합니다iFrame이 100 % 높이로 확장되지 않습니다.

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    </head> 
    <body> 
     <div id="container-frame"> 
      <img id="if-logo" height="35" width="84" alt="Kucku" src="/Content/Images/logo.gif"/> 
      <img id="if-avatar" height="30" width="30" alt="Avatar" src="http://web.kucku.vn/Content/Images/Avatars/default_profile_bigger.png"/> 
      <a id="if-username" href="/nvthoai">nvthoai</a> 
      <div id="if-box"> 
      </div> 
      <a id="if-close" href="http://www.yahoo.com" target="_top"> </a> 
      <div id="if-link"> 
      </div> 
      <div id="if-star"> 
      </div> 
     </div> 
     <iframe id="mainFrame" frameborder="no" width="100%" title="mainFrame" framespacing="0" border="0" name="mainFrame" src="http://www.yahoo.com" style="display: block; width: 100%; float: left; height: 100%;"> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      </html> 
     </iframe> 
    </body> 
</html> 



#container-frame { 
background:#E1E1E1 url(../images/if_bg.gif) repeat-x scroll 0 0; 
height:35px; 
width:100%; 
}

출처

2009-08-12 HP.

height : 100 %가 작동하지 않는 이유는 부모가 명시 적이 지 않은 (%가 아닌) 높이의 어린이에게는 % 높이가 작동하지 않기 때문입니다. 이 수행하는 동안

parent { 
    height: 60%; 
} 

child { 
    height: 100%; 
}

을 :

parent { 
    height: 60em; 
} 

child { 
    height: 100%; 
}

아이가 무엇을 60 % 방법을 알고하지 않기 때문에 대신 높이가된다 : 그래서이 작동하지 않습니다 자동 (그 안에 정적 콘텐츠에 의해 결정 높이).

어린이는 60em 또는 기타 명시 적 단위의 %를 계산하는 방법을 알고 있습니다.

이 규칙에는 몇 가지 예외가 있습니다. 하나는 html과 body 요소에 height : 100 %가 주어 졌을 때 직접 자식에 대해 height : 100 % 또는 min-height : 100 %를 사용할 수있는 곳입니다. (당신은 높이를 시도 할 수있다 : 팻은 제안했지만 96 %는 화면/브라우저 높이마다 완전히 다른 값이 될 것이다.) 예기치 않은 크기에서는 내용을 잃을 수있다.)

HTML을 오독하지 않는 한, 두 개의 직접적인 자식 인 iframe과 # container-frame이 있습니다.

뷰포트 상단에 # container-frame을 배치 할 수 있습니다 (페이지 상단에 위치 할 수 있고 "위에서"는 "사용자에게 z 축에 가깝다"를 의미). iframe이 100 %로 설정되지 않았지만 Pat의 예제, 96 % 또는 그와 비슷할 수도있는 iframe을 # if container-frame에 대한 시각적 인 공간을 만들기 위해 iframe에 제공 할 수 있습니다. 그렇지 않으면 iframe의 상단이 # container-frame으로 가려져 사람들이 상단을 놓칠 수 있습니다. 상단 또는 하단 여백, 패딩, 테두리 등을 100 % 높이 상자에 추가 할 수 없다는 것을 알고 있어야합니다. 그것은 당신에게 100 % 이상의 것을 줄 것입니다!

% 높이 규칙에 대한 또 다른 예외는 일반적으로 절대적으로 배치 된 요소입니다. 그들은 IE6에서이 점을 제외하고는 높이도 가질 수 있습니다. 당신이 IE6에 해킹하거나 IE6에 대해 신경 쓰지 않는다면 절대적으로 직접 아이들 모두가 일할 수 있습니다. 일반적으로 페이지에 모든 것을 배치하는 것이 좋지 않지만 이런 경우에는 가장 쉽습니다.

출처

2009-08-12 11:54:03

width : 100 %가 작동하는 이유는 무엇입니까? – Brabbeldas

@Brabbeldas 너비와 높이가 본질적으로 다르게 동작합니다. 이것은 첫 번째 추측에 지나지 않지만 브라우저가 페이지의 전체 너비 (뷰포트 한도 또는 명시적인 더 넓은 설정)를 결정할 수있는 능력을 가지고 있지만 높이가 필요에 따라 늘어날 것이므로 명시 적으로 언급하지 않는 한, 브라우저가 100 % 의미하는 것을 알 수 없다. –

이 CSS는 당신을 위해 트릭을 할해야합니다

body { 
    margin: 0; 
    padding: 0; 
    overflow-y: hidden; 
}

그 다음 96 %에 iframe 대응의 높이를 설정합니다. 이렇게하면 페이지 아래쪽으로 밀리지 않습니다.

이유는 iframe의 높이가 100 %로 사용 가능한 화면 높이의 100 %로 계산되기 때문입니다. iframe 위에 35px 높이의 div가 있으므로 전체 화면 높이를 35px 높이로 iframe을 밀어 넣으면됩니다.

출처

2009-08-12 03:04:20 Pat

나는 아직도 문제가있다. 당신이 그것을보고 싶다면 웹 사이트는 여기에 있습니다 http://web.kucku.vn/u/D –

네, 저에게 도움이되었습니다. 내 main.html 두 프레임, navigate.html 및 content.html 있습니다. main.html 본문의 스타일을 정하기 위해 CSS보다 위에 사용했습니다. – msinfo

-1

당신은 단순히 대신 <iframe>

예 <object>를 사용하여 시도해 볼 수도 있습니다 : 대부분의 사람들이 (객체 또는 iframe을 사용하여) 보안을 위해, 프레임의 어떤 종류를 사용에 대한 추천 것으로

가

<object type='text/html' data="http://www.wikipedia.org/" style='width:100%; height:100%'>

참고.

업데이트

나는 잊었다! 본문이로드 된 후에 실행되는 javascript 함수를 사용하여 iFrame을 동적으로 조정하는 방법이있을 수도 있습니다. 그것의 아주 좋은 예가있다 here.

출처

2009-08-12 13:21:39

iFrame이 100 % 높이로 확장되지 않습니다.

답변

관련 문제