保持 flex 项目的宽高比

Question

保持 flex 项目的宽高比

3

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

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

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 纵横比的同时增加其高度以填充文档的其余部分（当然，带有边距）？

谢谢。

- 4lackof

1

我对你的目标还不太清楚，但这里有一个可能的前进步骤：在弹性项目上不要使用基于百分比的padding（或margin）。 - undefined

@Michael_B 谢谢你。我已经更新了问题。 - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

使用纵横比计算器，我们可以确定8.5 x 11相当于8 x 10（80% x 100%）。

使用CSS 视口百分比单位，我们可以设置元素的高度以在所有屏幕尺寸上模拟信纸大小。

这是基本代码：

.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>

保持 flex 项目的宽高比

{{链接1：jsFiddle}}