我有一个页面,它应该模拟信纸大小的纸张。该页面基本上分为两个部分,顶部导航栏和页面主体。
我的代码目前看起来像这样:
html, body { height: 100%; overflow: hidden; }
body {
display: flex;
flex-flow: column;
font-family: "Arial", "Helvetica", "sans-serif";
font-size: 1em;
}
.hor-nav {
background-color: #666;
color: white;
height: 64px;
}
.main {
display: inline-flex;
flex: 1;
width: 100%;
}
.page {
border: 1px solid black;
flex: 1 1 auto;
margin: 16px;
padding-right: 77.27975270479134%;
}
<div class="hor-nav">
test
</div>
<div class="main">
<div class="page">
test
</div>
</div>
我一直在尝试使用“padding%技巧”,但似乎无效。
我的最终目标是“纸张”(模拟11英寸高和8.5英寸宽的信纸),以填充导航栏(上面代码段中的灰色栏)之后剩余的垂直/高度空间,同时保持11:8.5(或1.294:1)的长宽比。
为了填充垂直空间,我正在使用 flex box,而纸张是一个 flex-item,具有属性:flex: 1 1 auto;
。这会根据网页的变化而扩大或缩小纸张,但也会影响其宽度。
我最成功的方法是取消 flex: 1 1 auto;
并使用 width: 77.2%;
(我计算出来的“纸张”宽度,但这个数字可能不正确),但这并没有奏效,因为它没有保持长宽比,而只是确保宽度仅为包含元素的 77.2%。
注意:从上面的代码段可以看出,我正在使用 padding
,因为我尝试过padding技巧,但正如 @Michael_B 指出的那样,这并不起作用。由于我没有其他可行的代码,因此尚未能够将其替换掉。
是否有人知道如何在保持 flex-item 纵横比的同时增加其高度以填充文档的其余部分(当然,带有边距)?
谢谢。