스크롤 막대를 추가하지 않고 내용을 PDF로 표시하는 탐색 및 콘텐츠가 포함 된 두 개의 열 형식

여러 조합을 시도했지만 불필요한 스크롤 막대를 추가하지 않고 정상적으로 표시되는 조합을 찾지 못했습니다.스크롤 막대를 추가하지 않고 내용을 PDF로 표시하는 탐색 및 콘텐츠가 포함 된 두 개의 열 형식

탐색 열을 표시 한 다음 콘텐츠 열을 표시하는 페이지가 있습니다. 콘텐츠 열에서 IFrame에 PDF를 표시하고 있습니다. 왼쪽 열은 150px로 고정되어 있습니다. 페이지의 너비와 페이지의 높이를 모두 소비하려면 오른쪽 열이 필요합니다. IFrame을 오른손 div에 넣을 때 어떤 이유로 div가 약 5px 씩 늘어나고 추가 스크롤 막대가 추가되어 일을 망칠뿐입니다. overflow-y :를 사용하여 스크롤 막대를 사라지게 할 수 있습니다. 그러나 숨겨진 것보다는 해킹 인 것 같습니다.

iframe과 object 태그를 모두 사용해 보았습니다. 동작이 동일합니다.

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     html, body 
     { 
      height: 100%; 
      width: 100%; 
      padding: 0px; 
      margin: 0px; 
      background-color:#808080; 
     } 

     div#nav 
     { 
      position: absolute; 
      height: 100%; 
      width: 150px; 
      top: 0; 
      left: 0; 
      background-color:#C0C0C0; 
     } 

     div#content 
     { 
      top: 0px; 
      height: 100%; 
      margin-left: 150px; 
      background-color: #2F4F4F; 
     } 

     iframe#pdf 
     { 
      width:100%; 
      height:100%; 
     } 
    </style> 
</head> 
<body> 
    <div id="nav"> 
     <fieldset class="lookupFields"> 
      <div> 
       <label for="book" >Book:</label> 
       <input type="text" id="book" size="5" /> 
      </div> 
      <div> 
       <label for="page">Page:</label> 
       <input type="text" id="page" size="5" /> 
      </div> 
      <div> 
       <input type="button" id="btnViewImage" value="View" /> 
      </div> 
     </fieldset> 
    </div> 
    <div id="content"> 
     <iframe id="pdf" frameborder="0" src="06500001-2.pdf"></iframe> 
    </div> 
</body> 
</html>

감사

DBL 여기

출처

2014-06-07 dblwizard

은 당신의 코드를 기반으로 FIDDLE입니다.

pdf는 아주 잘 맞는 것처럼 보입니다. 추가 스크롤 막대가 없습니다. pdf 페이지 크기가 변경되면서 페이지 크기가 변경됩니다. (저는 IE11을 사용하고 있습니다).

HTML에서 많이 변경되지 않았습니다. 나는 오른쪽 측면을 따라 두 개의 스크롤 막대가 IE 11에서

<div id="nav"> 
    <fieldset class="lookupFields"> 
    <div> 
     <label for="book" >Book:</label> 
     <input type="text" id="book" size="5" /> 
    </div> 
    <div> 
     <label for="page">Page:</label> 
     <input type="text" id="page" size="5" /> 
    </div> 
    <div> 
     <input type="button" id="btnViewImage" value="View" /> 
    </div> 
    </fieldset> 
</div> 
<div id="content"> 
    <iframe id="pdf" frameborder="0" src="http://www.historytools.org/sources/lincoln-gettysburg.pdf"> 
    </iframe> 
</div>

출처

2014-06-08 01:36:06 TimSPQR

및 FF (29)

HTML. 하나는 adobe acrobat 용이고 다른 하나는 브라우저 용입니다. 브라우저는 약 5px 만 스크롤합니다. – dblwizard

호기심에서 벗어나 어떤 버전의 Adobe PDF 플러그인을 사용하고 있습니까? 나는 11.0.07을 가지고있다. – dblwizard

jsfiddle 내장 플러그인이거나 jsfiddle이 자동으로 Adobe Reader를 호출합니다 (의심스러운). – TimSPQR

스크롤 막대를 추가하지 않고 내용을 PDF로 표시하는 탐색 및 콘텐츠가 포함 된 두 개의 열 형식

답변

관련 문제