gpt4 book ai didi

html - 如何为内容框和嵌入对象提供最小高度?

转载 作者:行者123 更新时间:2023-11-28 08:01:39 25 4
gpt4 key购买 nike

我正在为网页设计类(class)制作一个个人网站,但我很难让内容框保持标准高度并且不让任何高度较大的嵌入信息拉伸(stretch)内容框。这是它的样子: 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>

最佳答案

Ideally, I want the height of the content box to change with the height of the pdf.

如果你想让你的框作为 PDF 页面的百分比,请注意一些单位,如 vh 和 vw,是相对于视口(viewport)尺寸的,所以你必须声明两个样式表: 一个用于屏幕,另一个用于纸张/PDF。

参见 http://www.w3.org/TR/css3-values/获取您可以使用的单位列表。

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com