0

我尝试了几种组合，但还没有找到一种可以在不添加不需要的滚动条的情况下优雅显示的组合。

我有一个页面显示导航列，然后是内容列。在内容列中，我在 IFrame 中显示 PDF。左侧列固定为 150 像素。我需要右侧的列来消耗页面的其余宽度和页面的所有高度。出于某种原因，当 IFrame 放在右手边时，div 会增长大约 5px，并且它添加了一个额外的滚动条，只是把事情搞砸了。我可以使用 overflow-y: hidden 使滚动条消失，但这似乎是 hack 而不是正确的做法。

我已经使用 iframe 和对象标签尝试过它，并且行为是相同的。

<!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 回答