0
Я работаю над созданием персонального веб-сайта для класса веб-дизайна, и у меня возникают трудности с содержимым, поддерживающим стандартную высоту, и не позволяя встроенной информации, которая больше по высоте, растянуть содержимое. Это то, на что это похоже: http://i.imgur.com/HRJ07WD.png?1Как указать минимальную высоту содержимого и встроенных объектов?
В идеале я хочу, чтобы высота окна содержимого изменялась с высотой pdf. Однако мне также нужно, чтобы он оставался рефлексивным. Я включил css для области, где находится PDF, и 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 © 2015 by Stephanie Newman. Background © 2014 by Sagive on subtlepatterns.com.
Contact: <a href="mailto:[email protected]">
[email protected]</a></p>
</footer>
</div><!--Closes container div-->
</body>
</html>
P.S! Удалите адрес электронной почты из своего образца кода (если адрес является действительным) –
... и удалите номер телефона! –