Question

这似乎是一个非常基本的问题，可能有一个非常简单的答案，但我已经研究了一段时间，似乎无法做到正确。

我想在页眉底部到页面底部的iframe拉伸中制作PDF。到目前为止，我已经在标题的底部开始了iframe，但是我无法让它完全伸展到底部。

我试过移动东西，以便标题在它自己的身体中，所以所有东西都在同一个体内，所以只有iframe在一个体内，所以一切都有自己的身体。我尝试了很多东西。这是我的代码，任何想法？谢谢！

// This script is for the Issues dropdown
function dropdown() {
    document.getElementById("issuesDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.bannerDropdown')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  /*background:
  linear-gradient(27deg, #002856 5px, transparent 5px) 0 5px,
  linear-gradient(207deg, #002856 5px, transparent 5px) 10px 0px,
  linear-gradient(27deg, #003e87 5px, transparent 5px) 0px 10px,
  linear-gradient(207deg, #003e87 5px, transparent 5px) 10px 5px,
  linear-gradient(90deg, #002856 10px, transparent 10px),
  linear-gradient(#1d1d1d 25%, #002856 25%, #003e87 50%, transparent 50%, transparent 75%, #003e87 75%, #003e87);*/
  background-color: #002e63;
  background-size: 20px 20px;
}

.inFullscreenButton {
  color: #fff;
  position: fixed;
  top: 140px;
  left: 0;
  z-index: 1;
  display: block;
  font-family: arial;
  font-size: 14pt;
  cursor: pointer;
  background: #003e63;
  text-align: center;
  vertical-align: middle;
  line-height: 48px;
  width: 9.5%;
  vertical-align: middle;
  border: 2px solid #001463;
  border-top: 2px solid #003e63;
  border-left: 2px solid #003e63;
}

.fullscreenButton {
  color: #fff;
  position: fixed;
  top: 147px;
  left: 251px;
  z-index: 1;
  display: block;
  font-family: arial;
  font-size: 14pt;
  cursor: pointer;
  background: #003e63;
  text-align: center;
  vertical-align: middle;
  line-height: 48px;
  width: 102px;
  vertical-align: middle;
  border: 2px solid #001463;
}

.hideText {
  color: transparent;
}

.fullscreenArticle {
  width: 100%;
  height: 84.1699849%;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.article {
  width: 50%;
  height: 82%;
  position: relative;
  top: 0;
  bottom: 0;
  z-index: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.banner {
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: block;
  background: #003e63;
  cursor: pointer;
  z-index: 1;
}

.bannerText {
  width: 33.34%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: block;
  background: #003e63;
  border-bottom: .2em solid #001463;
  font-family: arial;
  font-size: 18pt;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  cursor: pointer;
  line-height: 150%;
}

.bannerText:hover {
  color: #808080;
}

.normalText {
  z-index: 1;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: white;
    padding: .5em;
    font-family: arial;
    font-size: 14pt;
    text-decoration: none;
    display: block;
    border-bottom: .2em solid #001463;
    background: #003e63;
    z-index: 1;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #1958a0}

.bannerDropdown {
    background-color: #003e63;
    color: #fff;
    padding: 0;
    font-size: 18pt;
    border: none;
    cursor: pointer;
    z-index: 1;
}

.bannerDropdown:hover, .bannerDropdown:focus {
    color: #808080;
    z-index: 1;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

<body>
<div id='banner' class='banner'>
  <img id='bannerimage' class='banner' src='banner1920x130.png' alt='The Spartan Spotlight' onclick="location.href='main.html'">
  <div id='issues' class='bannerText' style='float: left;' class='dropdown'>
    <div onclick="dropdown()" class="bannerDropdown">Issues</div>
    <div id="issuesDropdown" class="dropdown-content">
      <a href="#">Issue 3 - Coming soon...</a>
      <a href="issue-2.html">Issue 2 - December 2017</a>
      <a href="issue-1.html">Issue 1 - November 2017</a>
      <a href="#">Older Issues</a>
    </div>
  </div>
  <div id='contact-us' class='bannerText' style='float: right;' onclick="location.href='style.css'">Contact Us</div>
  <div id='the-team' class='bannerText' style='margin: 0 33.3%;' onclick="location.href='style.css'">The Team</div>
</div>

<iframe id='article' class='article' src="issue-1.pdf#toolbar=0&view=fitH" type='application/pdf' frameborder=0></iframe>

</body>

Answer 1

如果顶部的横幅图片高度为130px，则其下方的横幅行高度约为36px，您可以将此内容用于iframe高度，以将页面的剩余高度填充到底部：

.article {
  // ...
  height: calc(100% - (130px + 36px + 8px)); //8px is for padding/margins...
  // ...
}

更新：正如您在评论中所述，如果未修正高度，您可以将display: table;和table-row用于此目的：

html, body {
  height: 100%;
  margin: 0; padding: 0;
}

.container
{
  display: table;
  width: 100%;
  height: 99.5%; /* provide a little space at bottom, you may use: calc(100% - 5px) */
}

.row { display: table-row; }

.article {
  /*display: table-row;*/
  width: 50%;
  height: 100%; 
  margin-left: auto;
  margin-right: auto;
  border: none; 
  background: silver;
}

<div class="container">
  <div id="div1" class="row" style="height:130px; background: blue;">banner image...</div>

  <iframe class="row article" src="" type="application/pdf">
  </iframe>
</div>

从身体顶部到页面底部拉伸iframe

1 个答案: