iframe breaking 부모 요소 크기

Question

나는 메뉴에서 어떤 필드가 선택되어 있는지 MySQL 쿼리에서 테이블을 생성하는 데 사용되는 메뉴가 page입니다. 화면의 일부에서만 표를 생성하기 위해 "Refresh table button"이 필요했고 iframe의 기능면에서 그 일을했습니다. 그러나 제가보기에 집중했을 때, 프레임에 문제가 생기기 시작했습니다. 왼쪽과 위쪽, 오른쪽과 아래쪽에 경계가있는 것처럼 보이지만 부모 프레임 div와 본문 div의 크기를 초과합니다.

기능을 변경하지 않고이 문제를 해결할 수 있습니까?

HTML

<div class="menucontainer"> 
<div class="leftbox"> 
    Selected options 
    <form method="post" action="genTable.php" target="myIframe"> 

    <select id="leftValues" name="cols[ ]" size="5" multiple> 
     <option>paper</option> 
     <option>authors</option> 
    </select> 

    <div class="submitbutton"> 
    <input type="submit" name="submit" value="Refresh Table" onclick="selectAll();"> 
    </div> 

    </form> 
</div> 

<div class="buttons"> 
    <input type="button" id="btnLeft" value="&lt;&lt;" /> 
    <input type="button" id="btnRight" value="&gt;&gt;" /> 

</div> 

<div class="rightbox"> 
    Available options 
    <select id="rightValues" size="5" multiple> 
     <option>id</option> 
     <option>journal</option> 
     <option>title</option> 
    </select> 
</div> 

</div> 


<h1>Financial Frictions Papers</h1> 
</div> 


<iframe name="myIframe"> 
</iframe> 

</div> 
</body> 

당신은 절대적으로 iframe이 위치하고 그것을가 한 넓게 될 것 의미 100 %의 폭을 제공하고

body { 
    font-family: Helvetica, Arial, Verdana, sans-serif; 
    color: #111; 

    font-size: 12px; 
    background:#2e2e2e; 
    height: 100%; 
    /*292929*/ 
    /* default bfbfbf*/ 
} 

.frame { 
padding: 20px; 
color: #000000; 
height: 100%; 
    min-height: 580px; 
    background: #3AAB8D;/*#504f4f;*/ 
} 

.top { 
    background: #1188FF; 
} 

iframe{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

Answer 1

CSS 전체 페이지가 아닌 div 태그가 실제로 div의 'in'이 아니기 때문에 발생합니다.

너비를 줄이거 나 iframe을 절대 배치하지 않도록하십시오.

ETA : Firefox에서 CSS를 편집 할 때 절대 위치 지정을 제거하고 너비를 99.8 % (스크롤바를 수용하기 위해)로 변경했습니다.