0

いくつかの組み合わせを試しましたが、不要なスクロール バーを追加せずに適切に表示される組み合わせはまだ見つかりません。

ナビゲーション列とコンテンツ列を表示するページがあります。コンテンツ列では、IFrame に PDF を表示しています。左側の列は、たとえば 150px に固定されています。ページの幅の残りとページの高さのすべてを消費するには、右側の列が必要です。何らかの理由で、IFrame が右側に配置されると、div が約 5px 大きくなり、追加のスクロール バーが追加されます。overflow-y: hidden を使用してスクロール バーを非表示にすることはできますが、それは正しいことではなくハックのようです。

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

4

1 に答える 1

0

これは、コードに基づくFIDDLEです。

PDFは非常にうまく収まるようで、余分なスクロールバーは表示されません。ページのサイズを変更すると、pdfページのサイズが変更されます。（私はIE11を使用しています）。

HTML はあまり変更していません。

HTML

<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-08T01:36:06.203 に答える