我已经尝试了几种组合，但还没有找到一种可以在不添加不需要的滚动条的情况下优雅地显示的组合。
我有一个页面显示导航栏，然后是内容栏。在内容列中，我在 IFrame 中显示 PDF。左边的列固定在 150px。我需要右边的列来消耗页面的其余宽度和页面的所有高度。出于某种原因，当 IFrame 放在右侧时，div 增长了大约 5px，并且它添加了一个额外的滚动条，这只会把事情搞砸。我可以使用 overflow-y: hidden 使滚动条消失，但这似乎是 hack 而不是正确的做法。
我已经用 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>
最佳答案
这是一个 FIDDLE基于您的代码。
PDF 似乎非常合适，我没有看到额外的滚动条。 PDF 页面随着我更改页面大小而调整大小(我使用的是 IE11)。
我没有对 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>
关于html - 具有 Nav 和 Content 的两列格式在 Content 中显示 PDF 而无需额外的滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24101685/