如何为内容框和嵌入对象指定最小高度？答案

【问题标题】：How do I give content box and embedded objects minimum heights?如何为内容框和嵌入对象指定最小高度？
【发布时间】：2015-06-25 19:24:21
【问题描述】：

我正在为网页设计课程制作个人网站，我在内容框保持标准高度并且不让任何高度较大的嵌入信息拉伸内容框时遇到了困难。这是它的样子： http://i.imgur.com/HRJ07WD.png?1

理想情况下，我希望内容框的高度随 pdf 的高度而变化。但是，我也需要它保持自反性。我已经包含了 PDF 所在区域的 css，以及整个页面的 html，以防有一部分我没有更改并且应该更改。

article {
background-color:#fff;
float:none;
padding-top:10px;
padding-right:5%;
padding-left:5%;
padding-bottom:10px;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
border: 1px solid #5A5333; 
width:96%;
}

article {
    overflow:hidden;
    display: table-cell;
    }

article {
height: 100%;
min-height: 100%;
}

HTML：

<!DOCTYPE html>
<html>
<head lang="en">

<title>Stephanie Newman's Portfolio Website</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="resume.css" />

<!-- [if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- [if lt IE 8]> 
<style> /* For IE < 8 (trigger hasLayout) */ .clearfix {zoom:1;} </style> 
<![endif]-->


</head>

<body>
<div>
<header>
<img class="logo" src="_images/logo.png" alt="index logo">
<h1>Stephanie Newman</h1>
</header>

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="biography.html">Biography</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

<section class="clearfix">
<article>
If you can't view the pdf below or would like to download a copy of my resume, you can <a href="/StephanieNewmanResume.pdf">click here</a> to download the PDF file.
<br>
<object data="/StephanieNewmanResume.pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="15">...</object>
</article>
</section>


<footer>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="biography.html">Biography</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

<p class="footer"> Website &copy; 2015 by Stephanie Newman. Background &copy; 2014 by Sagive on subtlepatterns.com. 
Contact: <a href="mailto:steph1230@ufl.edu">
steph1230@ufl.edu</a></p>
</footer>
</div><!--Closes container div-->
</body>

</html>

【问题讨论】：

P.S！请从您的示例代码中删除电子邮件地址（如果地址有效）
...并删除电话号码！

标签： html css pdf height embed

【解决方案1】：

理想情况下，我希望内容框的高度随 pdf 的高度而变化。

如果你想让你的盒子占 PDF 页面的百分比，请注意某些单位，例如 vh 和 vw，是相对于视口尺寸的，所以你必须声明两个样式表：一个用于屏幕，另一个用于纸张/PDF。

请参阅http://www.w3.org/TR/css3-values/ 了解您可以使用的单位列表。

【讨论】：