- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我将 MVC 4 与 Bootstrap 用于我正在开发的网站。相当简单的布局,我有一个位于顶部的 Bootstrap 导航栏 (navbar-fixed-top),然后我有一个页面标题,一个具有绝对位置和高度的 div,就在菜单下方。
然后对于页面内容,我有一个 div,同样具有绝对位置,其顶部设置为它从页面标题下方开始。 body 上的溢出设置为无,页面内容上设置为自动。
body, html
{
height: 100%;
overflow: hidden;
}
.PageTitle
{
position: absolute;
top: 40px;
left: 0;
right: 0;
height: 60px;
color: #fdf4f4;
background-color: #4266cd;
border-color: #bce8f1;
}
.Content
{
overflow: auto;
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
}
这适用于其他页面,但我需要显示每月传单 (PDF) 并希望它填充内容区域并允许用户滚动它。问题当然是,如果我添加一个 100% 高度的 iFrame,它会占用内容 div(它的父级)的高度,这就是浏览器窗口的高度。如果我能告诉它把高度设置为 100% - 100px,那就太酷了。
我曾尝试使用 jQuery 更改大小,但没有成功。
有人有一些想法可以帮助我吗?
谢谢。
更新:我阅读了 Akshay Khandelwal 的帖子并创建了一个简单的 HTML 页面,其中包含我想要做的基础知识。在重现我之前遇到的问题的过程中,我可能已经找到了解决方案。看起来下面的代码有效。不确定这是否是一个好方法。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PDF View Test</title>
<style>
body
{
margin: 0;
overflow: hidden;
}
.NavBarTop
{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 40px;
margin-bottom: 0;
background: #778899;
}
.PageTitle
{
position: absolute;
top: 40px;
left: 0;
right: 0;
height: 60px;
color: #fdf4f4;
background-color: #4266cd;
border-color: #bce8f1;
}
.Content
{
overflow: hidden;
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
}
h3
{
color: rgb(253, 244, 244);
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 25px;
font-weight: bold;
height: 40px;
line-height: 40px;
margin-bottom: 10px;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
text-align: center;
}
h4
{
color: rgb(253, 244, 244);
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
height: 20px;
line-height: 20px;
margin-bottom: 5px;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
text-align: center;
}
iframe
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="NavBarTop">
<h4>This is the menu bar.</h4>
</div>
<div class="PageTitle">
<h3>The Page Title</h3>
</div>
<div class="Content">
<iframe src="http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/products/content-server/pdfs/adobe-ebook-platform-whitepaper.pdf"/>
</div>
</body>
</html>
最佳答案
我找到了我所问问题的答案,尽管我不相信这是最好的方法。为了完整起见,这里的 HTML 将为您提供一个嵌入网页的 PDF,其中滚动条仅滚动 PDF 文档而不滚动页面标题和菜单。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PDF View Test</title>
<style>
body
{
margin: 0;
overflow: hidden;
}
.NavBarTop
{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 40px;
margin-bottom: 0;
background: #778899;
}
.PageTitle
{
position: absolute;
top: 40px;
left: 0;
right: 0;
height: 60px;
color: #fdf4f4;
background-color: #4266cd;
border-color: #bce8f1;
}
.Content
{
overflow: hidden;
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
}
h3
{
color: rgb(253, 244, 244);
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 25px;
font-weight: bold;
height: 40px;
line-height: 40px;
margin-bottom: 10px;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
text-align: center;
}
h4
{
color: rgb(253, 244, 244);
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
height: 20px;
line-height: 20px;
margin-bottom: 5px;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
text-align: center;
}
iframe
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="NavBarTop">
<h4>This is the menu bar.</h4>
</div>
<div class="PageTitle">
<h3>The Page Title</h3>
</div>
<div class="Content">
<iframe src="http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/products/content-server/pdfs/adobe-ebook-platform-whitepaper.pdf"/>
</div>
</body>
</html>
关于html - 包含 PDF 的 iFrame 的布局问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14663065/
我的代码有一些问题。我正在尝试遍历包含许多 PDF 的 Drive 文件夹,然后将它们合并为一个文件。当我使用我的代码时,它只是为 Drive 文件夹中的最后一个 PDF 创建一个 PDF,而不是按预
我从 PDF Specification 获取了 PDF 规范中的最小 PDF 示例。 ,将其复制到记事本,将文件重命名为扩展名为 .pdf。 我可以用其他 PDF 查看器(PDF-XChange、S
感谢您在以下方面的帮助: 我有 2 个部分可访问的 PDF(包含标签),我想使用一些命令行工具(如 PDFtk 或 Ghostscript,或任何 Perl 模块)将它们连接起来: 我已经尝试使用 P
我想使用 ghostscript 将矢量 pdf 转换为光栅 pdf(即光栅化矢量 pdf)。但是即使我添加了解析参数 -r300,我也找不到合适的参数来执行此操作。 我使用的代码是-dSAFER -
我无法在 FAQ 中找到这个功能是否存在于 API 中,尽管它在书中提到作为潜在可用的东西。有没有人有任何实现此功能的经验? 最佳答案 在 This thread (日期为 2007 年 6 月)Pa
我要放文件sample.pdf在我的网站上,并希望使用 pdf.js 显示它.我想要的是显示我自己的文件,如 demo ,带有工具栏,放大/缩小等。到目前为止,我还不能这样做。 我确实检查了 hell
我知道这可能不是严格意义上的编程问题(也许是,我不知道)但我在尝试转换常规 pdf(带有超链接、书签、图像、嵌入字体等)时遇到了严重问题.) 转换为 PDF/A-1 格式。 当我用 pdfaPilot
这是 PDF.js 网站 https://github.com/mozilla/pdf.js 我正在搜索和阅读很多文章,大多数编码都是将 pdf 导入 pdf.js 并在浏览器上显示,我不明白是不是
谁能建议我如何将扫描图像转换为可搜索图像或如何将扫描 pdf 转换为可搜索 pdf? 很长一段时间以来,我一直陷入这种情况。 我已经在 ubuntu 中尝试过 pdfocr 应用程序,但没有成功。 最
作为我对客户端/服务器 pdf 签名研究的一部分,我测试了 itext pdf 延迟签名示例。不幸的是,我生成的 pdf 即合并空签名 pdf 和哈希值的输出显示无效签名。 我的代码片段如下 cla
我想将一个 PDF 页面插入到另一个已缩放的 PDF 页面中。我想使用 iTextSharp 来实现此目的。 我有一个矢量绘图,可以导出为单页 PDF 文件。我想将此文件添加到其他 PDF 文档的页面
作为我对客户端/服务器 pdf 签名研究的一部分,我测试了 itext pdf 延迟签名示例。不幸的是,我生成的 pdf 即合并空签名 pdf 和哈希值的输出显示无效签名。 我的代码片段如下 cla
我想为 Kindle 转换电子书。我尝试使用 Calibre 将具有复杂格式样式和图像的基于两种语言的基于文本的大型 PDF 电子书转换为适用于 Kindle 的 AZW3 电子书,并且还尝试了亚马逊
我在 Google Chrome 中显示 pdf 时遇到问题。问题是 Chrome 将 pdf 的某些页面显示为黑色。 启用 Chrome PDF 查看器时会发生这种情况。如果我禁用此插件并使用 Ad
我确信这个问题无处不在,尽管我似乎找不到答案。我希望我的 PDF 文档在 PDF 阅读器中显示时没有空白页,但随后在封面后打印空白页,这样打印出来的文档在右侧甚至左侧都有奇数页。还有其他人遇到过这个问
我需要自动裁剪 pdf 文件(去除白边)。到目前为止,我尝试了两种并不完美的工具: pdf裁剪 问题:它不会裁剪某些 pdf。 pdf-crop-margins 问题:有时它裁剪得太多(精细的细节)。
This PDF由几个源文件组成。其中五个是包含 alpha channel 的 PNG。一种是没有 alpha channel 的 PNG。最后一 block 是带有透明效果的 Photoshop
我的团队将内部 wiki 页面用于各种内容。这些页面是使用 MediaWiki 创建的。我想知道是否有任何方法可以将 wiki 页面转换为 PDF 格式。我必须用它来将用户文档转换为 PDF 格式,以
我希望能够从我可能在数据库或 xml 或任何其他结构化形式中拥有的数据生成高度图形化(也包含大量文本内容)的 PDF 文件。 目前,我们的平面设计师在将内容作为 MS Word 文档后,在 Photo
我正在寻找可以帮助我找到重复 PDF 的实用程序。问题:我有 1000 个 PDF 文件。有些是重复的。由于不同的文件名和文件大小的微小差异,它们不容易被检测到。是否有实用程序/算法/库可以帮助我找到
我是一名优秀的程序员,十分优秀!