问题：

引导程序中嵌入的pdf不是全高

阙阳

2023-03-14

我在这个页面上嵌入的pdf有问题。赞助这个网站的前一个版本是html4，嵌入是用如下的对象标记完成的

  <object data="pdf/GreekFestSponsorship2013.pdf" type="application/pdf" width="100%" height="700px"> 
  <p>It appears you don't have a PDF plugin for this browser.</p>
  <p id="missing-pdf-plugin">You can <a href="pdf/GreekFestSponsorship2013.pdf">click here to download the PDF file</a>.</p>
  </object>

这是新代码

/* Flexible iFrame */
 
.flexible-container {
    position: relative;
    
    height: 0;
    overflow: hidden;
}
 
.flexible-container iframe,   
.flexible-container object,  
.flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Greek Festival Portsmouth NH</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Font Awesome JS -->
 <script src="https://use.fontawesome.com/a0aac8df13.js"></script>
<meta name="Description" content="Three fun-filled days in Portsmouth NH as the magic of Greece comes to town. The Glendi or party will begin on Friday, July 15th, July 16th and July 17th with authentic Greek food. We will offer live Greek music from the band orfeas and continual music by DJ Meleti. In addition to the food, there will be booths that will offer imported jewelry, arts and crafts from Greece. A children's play area will ensure the entire family enjoys their virtual visit to this ancient land.">
<meta name="Keywords" content=" st. nicholas greek orthodox church, nicholas in greek, greek cuisine, st. nicholas greek orthodox cathedral, charleston food and wine, greek orthodox archdiocese, goarch.org, greek food festivals, st nicholas greek festival, greek food festival, wine events, orthodox christianity, food and wine events, wine tasting events, greek orthodox calendar, dallas greek festival, greek festival st. louis, st nick gift ideas, st nicholas greek orthodox, what to do in portsmouth nh, wine and food events, greek for church, greek orthodox religion, food and wine festival 2016, nicholas greek, st nicholas greek, st louis greek, festival seacoast online calendar, portsmouth events, orthodox music, greek orthodox christian, greek orthodox churches, greek orthodox music, greek orthodox christianity, greek festival st louis mo, greek dates, seacoast nh events, st nick gifts, greek orthodox icon, annunciation  ,greek orthodox wine event, orthodox greek food and wine festivals, 2016 food and wine event, church in greek, greek orthodox church ann arbor, famous greek foods, portsmouth high, charleston wine festival, live music in portsmouth nh, activities in portsmouth nh, greek orthodox faith, greek orthodox festival st nicholas, orthodox greek nicholas, food and wine tasting, food and wine shows, food and wine events 2016, moving to portsmouth nh, portsmouth nh food music festival july, portsmouth nh classifieds, greek food items, live music in nh, festival this weekend, festival of food, eastern orthodox music, greek orthodox religious items, glendi festival, music festival, vendors, where is portsmouth nh, portsmouth activities, saint nicholas orthodox, becoming greek orthodox, greek church, music, music festival dates,  greek orthodox bishop, orthodox children festival in july, greek orthodox food events in portsmouth, greek orthodox festivals, dates in greek, eastern orthodox new year, greek orthodox schools, food in portsmouth, music festival in july, beer, weekend wine activities, the greek orthodox, on line events, greek orthodox community, orthodox music  ">

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="main-navigation-container navbar-fixed-top" id="primary-navbar">
            <nav class="navbar">
                <div class="container-fluid">
                    <!-- Mobile Toggle Button and stuff -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navigation" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="" title="PortsmouthGreekFestival.com">PortsmouthGreekFestival.com</a>
                    </div>
                    <!-- End of mobile toggle button -->
                    <!-- Start of the navbar -->
                    <div class="collapse navbar-collapse" id="primary-navigation">
                        <ul class="nav  nav-justified">
                            <li><a href="index.html">Home<span class="sr-only">(current)</span></a></li>
                           <li><a href="Menu.html">Menu</a></li>
                            <li><a href="photos.html">Photos</a></li>
                            <li><a href="events.html">Schedule of Events</a></li>
                            <li><a href="sponsors.html">Sponsors</a></li> 
                            <li><a href="contact.html">Contact</a></li>
                            </ul>
                    </div>
                </div>
            </nav>
</div>  
<header class="masthead">
      <img src="images/Banner.jpg" alt="Portsmouth Greek Festival Logo">
</header>     
<!-- /.container -->
<!-- Feature -->
<div class="container">

<h1>Sponsorship Opportunities</h1>
<div class="flexible-container-embed">
<object data="pdf/GreekFestSponsorship2013.pdf" type="application/pdf" width="100%" height="100%">
   <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://portsmouthgreekfestival.com/pdf/GreekFestSponsorship2013.pdf">Download PDF</a></p>
</object>
  
</div> </div>
<footer>    
<!-- Copyright etc -->
<div id="Copyright">
<p>Copyright &copy; <script>document.write(new Date().getFullYear());</script> PortsmouthGreekFestival.com</p>
</div>
</footer>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport bug workaround -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

共有2个答案

巫马化

2023-03-14

以100%的高度显示PDF文件非常困难。您可能希望采用Bootstrap的响应式嵌入式媒体方法，因为结果相当不错，而且所涉及的麻烦更少。

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Hello World!</h1>
        <div class="embed-responsive embed-responsive-4by3">
            <object data="test.pdf" type="application/pdf">
                <p>
                    Your browser does not support embedded PDF files.<br>
                    <a href="test.pdf">Click here to
                    download the PDF file.</a>
                </p>
            </object>
        </div>
    </div>
</body>
</html>

请记住，并非所有浏览器都支持嵌入式PDF文件，因此中的通知

孔冥夜

2023-03-14

您有2个额外的规则集，可以按预期工作，但您需要...

用超文本标记语言改正：

<div class="flexible-container-embed"> to this:
<div class="flexible-container">

...并将其添加到。灵活容器CSS规则集：

 padding-bottom:100%`

我认为发生的事情是，您找到了正确的代码来修复它，但在实现它时，您不理解为什么某些属性和值看起来如此奇怪。例如（对大写表示抱歉，格式有限，我没有大喊大叫）：

/* Flexible iFrame */

.flexible-container {
    position: relative;
    /* This blank line was probably:
    || padding-top: 56.25%;
    */
    height: 0;
    overflow: hidden;
}

/* This ruleset says:
|| "Apply the following properties and their values to ANY `<iframe>`,
|| `<object>`, or `<embed>` THAT IS A CHILD OF any element with the 
|| class of `.flexible-container`.
*/
.flexible-container iframe,   
.flexible-container object, 
.flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

当您应用这两个规则集时，您已经给出了包装的div

接下来是padding bottom属性。这通常为56.25%，当应用于iframe的容器时，可提供适当的上下文，以保持高度为9到宽度为16。这对于宽屏幕格式的视频来说很好，但对于高宽比可能为8:11或72%的PDF来说就不太好了（我在演示中使用了100%，因为这是您要求的，除了包含72%版本的编辑之外）如果我们将填充与高度：0相结合，我们会得到一个类似于“收缩包装”的容器，它根据内容的宽度调整其高度。更新：由于PDF插件添加了填充，所以从100%到72%没有明显的变化。

我改了

类似资料：

为什么在嵌入式设备中需要引导加载程序？

问题内容：我正在ARM Cortex-A8上使用ELinux内核。我知道引导加载程序的工作方式以及正在执行的工作。但是我有一个问题-为什么我们需要引导加载程序，为什么引导加载程序诞生了？为什么在没有引导加载程序的情况下不能直接从闪存将内核加载到RAM？如果我们加载它，将会发生什么？实际上，处理器将不支持它，但是为什么要遵循该程序？问题答案：引导加载程序是一种计算机程序，可以在自检完成
嵌入式PDF打印不在中心

我可以使用上面的简单代码将PDF文件嵌入到网页中。但是当我去打印网页（使用CTRL P）时，只有一半的PDF出现在打印预览上，因为它已经偏离中心。同样的情况也发生在这个网页上：http://pdfobject.com/examples/simplest-full-window.html. 以下是一个“打印版本”网页的例子，其中嵌入的PDF在打印时居中（CTRL P）：http://www.bbc.
嵌入式neo4j与Spring引导

我试图配置与。但得到这么多的麻烦与版本不同的包我想出了这个这是的依赖项，它是的依赖项。当我启动服务器时，一切都正常，但是当我试图用这段代码访问neo4j服务器时。通过在控制器中调用方法，我得到了拒绝的连接。我认为嵌入式neo4j没有启动，这就是原因。那么如何启动嵌入式服务器呢。我想如果我使用spring boot，它会自动启动，但事实并非如此。注：文件包含这是我遵循的项目https://
不嵌入字体的itext html到pdf

虽然它按预期工作，并嵌入了使用的字体子集，但我想知道是否有一种方法可以使生成的PDF文档完全不嵌入字体。当创建实例并将属性设置为并使用它们来生成各种PDF构建块时，就可以使用这种方法。在使用时，我正在寻找同样的行为。
@导入程序中的“意外“@”

我将项目更新为Xcode 5，并在构建设置中启用了模块。但是，当我使用时，我在程序中看到编译器错误
0 引导程序

我们现在开始准备编写AngularJS应用——phonecat。这一步骤（步骤0），您将会熟悉重要的源代码文件，学习启动包含AngularJS种子项目的开发环境，并在浏览器端运行应用。进入angular-phonecat目录，运行如下命令： git checkout -f step-0 该命令将重置phonecat项目的工作目录，建议您在每一学习步骤运行此命令，将命令中的数字改成您学习步骤对应的

引导程序中嵌入的pdf不是全高

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档