个人中心
gpt4 book ai didi

html - Bootstrap中嵌入的pdf不是全高

转载 作者：行者123 更新时间：2023-12-04 16:35:25 24 4
gpt4 key购买 nike

我在此页面上嵌入的 pdf 出现问题。 sponsorships该网站之前的版本是 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>
您可以在此屏幕截图中看到 pdf 的高度为何不是 100%。 screenshot

最佳答案

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

  2. ...在 HTML 中更正此问题:

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

  3. ...并将其添加到 .flexible-container CSS 规则集:

     padding-bottom:100%`
  4. 添加这 2 个规则集时，将它们放在 <style> 中元素，然后将其添加到 <head> 内的最后一个位置元素。请访问下面的 Plunker 链接查看示例。

我认为发生的事情是您找到了正确的代码来修复它，但在实现它时您不明白为什么某些属性和值看起来如此奇怪。例如(抱歉，大写，格式有限，我不是大喊大叫):

/* 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%;
}

当您应用这 2 个规则集时，您已经给出了包含 <object> 的 div .flexible-container-embed 的类(class)但这两个规则集都适用于 .flexible-container 类的元素和它的任何子项 <iframe> , <object> ，或<embed> 。基本上，删除类名的 -embed 部分。

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

我更改了<object>进入<iframe>因为它们更通用，您可以使用 <embed>以及。评论这个PLUNKER

关于html - Bootstrap中嵌入的pdf不是全高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42569092/

24 4 0
文章推荐： html - 为什么这个 Bootstrap 崩溃不会在打开一个部分的情况下关闭其他部分？
文章推荐： twitter-bootstrap - 由 Bootstrap 模态创建时不呈现背景事件
文章推荐： html - Bootstrap 列的中心背景图像
文章推荐： html - 固定高度 div 内的 Bootstrap 下拉菜单
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com