Firefox에서 HTML iframe 높이가 올바르게 작동하지 않습니다 (상위 컨테이너 높이가 100 %, HTML 및 본문).

높이 100 %, 너비 100 % 인 iframe을 만들려고합니다. html과 body는 모두 100 % 높이로 설정되고 iframe이있는 테이블도 100 % 높이로 설정됩니다. 이것은 Chrome과 Safari (두 웹킷 모두)를 사용할 때 완벽하게 작동하지만 Firefox를 사용할 때는 전혀 작동하지 않습니다. Firefox를 사용하여 사이트를 볼 때 콘텐츠가 페이지 높이의 100 %를 채우지는 않지만 작은 부분 만 채 웁니다.Firefox에서 HTML iframe 높이가 올바르게 작동하지 않습니다 (상위 컨테이너 높이가 100 %, HTML 및 본문).

<?php include("checkOnLogin.php"); ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Fly Earth Staff Area</title> 
<link href="stylesheet.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<table width="100%" height="100%" id="main" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td id="header" colspan="2"><span id="text_flyearth">Fly Earth </span><span id="text_staffarea">Staff Area</span><span id="user_info"><?php include("getUserInfo.php"); ?></span></td> 
    </tr> 
    <tr> 
    <td id="nav"><?php include("navBarMain.html"); ?></td> 
    <td id="content"><iframe height="100%" width="100%" frameborder="0" src="/memchat"></iframe></td> 
    </tr> 
</table> 
</body> 
</html>

을 그리고 CSS :

다음은 내 HTML입니다

@charset "UTF-8"; 
/* CSS Document */ 

html { 
    height:100%; 
    width:100%; 
    padding:0; 
    margin:0; 
} 

body { 
    border:0; 
    margin:0; 
    padding:0; 
    height:100%; 
    width:100%; 
} 

#main { 
    width:100%; 
    height:100%; 
} 

#header { 
    height:40px; 
    background-image:url(images/header_bg.png); 
    background-repeat:repeat-x; 
    vertical-align:middle; 
} 

#text_flyearth { 
    font-size:20pt; 
    font-weight:bold; 
    font-family:Arial, Helvetica, sans-serif; 
    position:relative; 
    left:5px; 
    color:#333; 
} 

#text_staffarea { 
    font-size:20pt; 
    font-weight:normal; 
    font-family:Arial, Helvetica, sans-serif; 
    position:relative; 
    left:5px; 
    color:#333; 
} 

#nav { 
    background-color:#CCC; 
    width:200px; 
    text-align:left; 
    vertical-align:top; 
} 

#content { 
    background-color:#FFF; 
    vertical-align:top; 
    text-align:left; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12pt; 
    padding:15px; 

} 

.navlink:link { 
    text-decoration:none; 
} 

.navlink:visited { 
    text-decoration:none; 
} 

.navlink:hover { 
    text-decoration:underline; 
} 

.navlink:active { 
    text-decoration:underline; 
} 

.navlink { 
    color:#333; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14pt; 
    position:relative; 
    top:30px; 
    left:15px; 
} 

.navlinksmall:link { 
    text-decoration:none; 
} 

.navlinksmall:visited { 
    text-decoration:none; 
} 

.navlinksmall:hover { 
    text-decoration:underline; 
} 

.navlinksmall:active { 
    text-decoration:underline; 
} 

.navlinksmall { 
    color:#333; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:11pt; 
    position:relative; 
    top:30px; 
    left:15px; 
} 

#redlogin { 
    color:#F00; 
} 

#user_info { 
    font-family:Arial, Helvetica, sans-serif; 
    color:#FFF; 
    font-size:15pt; 
    text-align:right; 
    float:right; 
    position:relative; 
    top:3px; 
    right:5px; 
}

어떤 도움을 너무 많이

감사합니다! Robert

출처

2012-02-13 Robert

테이블 행이나 표 셀에 지정된 높이가 없으므로 iframe의 자동 높이가 지정되어야합니다.

출처

2012-02-13 05:45:06

답장을 보내 주셔서 감사합니다. 테이블 높이를 100 %로 유지하면서 어떻게 수정합니까? 셀 또는 행 높이 (테이블 높이를 지금으로 설정 한 100 % 이외)를 지정하면 레이아웃은 더 이상 브라우저 윈도우의 높이에 맞춰지지 않으며 고정됩니다. 또한 전체 표의 높이를 100 %로 설정하고 첫 번째 행의 높이를 40px로 설정하므로 행 높이를 명시 적으로 설정하지 않아도 두 번째 행이 페이지의 나머지 공간을 차지하지 않아야합니까? 그것이 브라우저 창 높이를 기반으로 유동적 인 레이아웃을 만들 수있게 해줍니다. – Robert

두 번째 행 높이를 올바른 calc() 표현식 (필요에 따라 접두사가 붙을 수 있음)으로 지정하면 원하는 것을 할 수 있습니까? –

도움을 다시 한번 감사드립니다! 두 번째 행 (nav 및 content)에있는 각 셀의 높이를 100 %로 설정했음을 알려주고 Firefox 및 다른 브라우저에서 모든 것이 예상대로 작동하고 있음을 알려드립니다. 이 두 셀의 100 % 높이가 상위 컨테이너의 100 %를 의미하며,이 경우 두 번째 행임을 알게되었습니다. 다시 한 번 감사드립니다! – Robert

Firefox에서 HTML iframe 높이가 올바르게 작동하지 않습니다 (상위 컨테이너 높이가 100 %, HTML 및 본문).

답변

관련 문제