Question

我有一个页面应该模仿一张信纸大小的纸张。该页面基本上分为两部分，顶部导航栏和页面的主要部分。

我的代码目前看起来像这样：

＆＃13;

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%;
}

＆＃13;

<div class="hor-nav">
  test
</div>
<div class="main">
  <div class="page">
    test
  </div>
</div>

＆＃13;

我一直在尝试使用＆＃34; padding％＆＃34;诀窍但它似乎没有起作用。

我的最终目标是＆＃34;论文＆＃34; （模拟11英寸高，8.5英寸宽的信纸）填充导航条后面的剩余垂直/高度空间（顶部的灰色条）上面的片段） while 同时保持宽高比为11：8.5（或1.294：1）。

要填充垂直空间，我使用的是柔性盒，纸张是具有属性flex: 1 1 auto;的弹性项目。这会使纸张变大或变暗以适应网页的变化，但是，它也会影响网页的宽度。

我获得的最成功的是摆脱flex: 1 1 auto;并使用width: 77.2%;（我计算的是一张＆＃34;纸张的宽度，＆＃34;然而这数字可能不正确），除了这不起作用，因为它没有保持纵横比，而只是确保宽度只是包含元素的77.2％。

注意：正如您从我上面的代码段中看到的那样，我正在尝试使用padding padding trick，但正如@Michael_B所指出的那样，这不起作用。由于我没有其他工作代码，我还无法将其替换掉。

是否有人知道如何保持弹性项目的宽高比，同时增加高度以填充文档的其余部分（当然，边距）

谢谢。

Answer 1

使用aspect ratio calculator，我们可以确定8.5 x 11相当于8 x 10（80％x 100％）。

使用CSS viewport percentage units，我们可以设置元素的高度来模拟所有屏幕尺寸的letter尺寸纸张。

这是基本代码：

.page {
  height: 100vh;
  width: 80vh;
}

body {
  display: flex;
  flex-flow: column;
}
.hor-nav {
  background-color: #666;
  color: white;
  height: 64px;
}
.main { }

.page {
  border: 1px solid black;
  margin: 16px;
  height: calc(100vh - 32px - 64px);  /* height, less margins, less nav height */
  width: calc(80vh - 32px - 64px);
}

<div class="hor-nav">test</div>
<div class="main">
  <div class="page">test</div>
</div>

保持弹性项目的纵横比

1 个答案:

jsFiddle