Bootstrap中的嵌入式pdf不全高

我在此頁面上遇到了嵌入式pdf的問題。 sponsorships這個網站的前一個版本是HTML4和嵌入用這樣Bootstrap中的嵌入式pdf不全高

<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％高度這個截圖。

來源

2017-03-03 mlegg

你能提供一個工作小提琴嗎？ – AVI

你有2個額外的規則組打算但你需要的是會工作...

...糾正這種在HTML：

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

...並將其添加到.flexible-container CSS規則集：
```
padding-bottom:100%` 
```
當添加這些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，你給了一個包裝div中<object>類.flexible-container-embed但兩者的規則集適用於類別爲.flexible-container和的任何子元素，這些子元素爲,<object>或<embed>。基本上，刪除 ~~-embed~~部分的類名稱。

接下來是padding-bottom屬性。這通常爲56.25％，當應用於iframe的容器時，適當的上下文將高度保持爲9至16的寬度。這對於寬屏幕格式的視頻來說很好，但對於可能具有8:11或72％的寬高比的PDF來說不是那麼好（我在演示中使用了100％，因爲這是您所要求的，希望編輯會包括72％的版本。）如果我們將填充與height:0結合起來，我們會得到一個容器，它的行爲類似於「shrinkwrap」，根據其內容的寬度調整它的高度。更新：由於PDF插件添加了填充，因此從100％到72％沒有可察覺的變化。

我將<object>更改爲，因爲它們更通用，您也可以使用<embed>。評論這個PLUNKER

來源

2017-03-05 11:28:37 zer00ne

非常感謝你 – mlegg

很高興我能幫上忙，先生。 – zer00ne

很難在完全100％的高度上顯示PDF文件。您可能需要採用Bootstrap的responsive embedded media方法，因爲結果相當不錯，涉及的麻煩較少。

結果在Chrome：

結果在Firefox：

的源代碼：

<!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文件，因此該通知在<object>標記內。

來源

2017-03-05 10:40:36

Bootstrap中的嵌入式pdf不全高

回答

相關問題