html - 如何给内容框和嵌入式对象最小高度？

我正在为Web设计课程制作一个个人网站，但我很难使内容框保持标准高度，并且不能让任何高度较大的嵌入式信息拉伸内容框。看起来是这样的：
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>

最佳答案

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

如果要将框作为PDF页面的百分比，请注意某些单位（例如vh和vw）相对于视口尺寸，因此必须声明两个样式表：一个用于屏幕，另一个用于样式表。纸/ PDF。

有关可以使用的单位的列表，请参见http://www.w3.org/TR/css3-values/。

关于html - 如何给内容框和嵌入式对象最小高度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29724677/