我尝试了几种组合,但还没有找到一种可以在不添加不需要的滚动条的情况下优雅显示的组合。
我有一个页面显示导航列,然后是内容列。在内容列中,我在 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