保持弹性项目的长宽比 [英] Maintain aspect ratio of flex item

问题描述

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

I have a page which is supposed to emulate a letter size piece of paper. The page is basically split into two parts, the top nav-bar and the the main part of the page.

我的代码当前如下所示:

My code currently looks like this:

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％"技巧，但似乎没有用.

I have been trying to make use of the "padding %" trick but it does not seem to be working for.

我的最终目标是纸"(模拟11英寸高和8.5英寸宽的信纸)，以在剩余的垂直/高度空间内填充导航栏(上面代码段顶部的灰色栏)，同时将长宽比保持为11:8.5(或1.294:1).

My end goal is the "paper" (an emulation of 11in tall and 8.5in wide piece of letter paper) to fill the remaining vertical/height space after the nav-bar (the grey bar at the top of the above snippet) while at the same time keep the aspect ratio of 11:8.5 (or 1.294:1).

要填充垂直空间，我使用的是柔韧性盒，并且纸张是具有以下属性的柔韧性项目:flex: 1 1 auto;.这会增加或缩小纸张以适应网页的更改，但是，这也会影响其宽度.

To fill the vertical space I am using a flex box and the paper is a flex-item with the property: flex: 1 1 auto;. This grows or shinks the paper to accommodate the change of the webpage, however, it also effects it's width.

我获得的最成功的方法是摆脱flex: 1 1 auto;并使用width: 77.2%;(我计算这是一张纸"的宽度，但是这个数字可能不正确)，除了不起作用，因为它没有保持宽高比，而是只是确保宽度仅为包含元素的77.2％.

The most successful I have gotten is getting rid of the flex: 1 1 auto; and using width: 77.2%; (what I calculated to be the width of a piece of "paper," however this number might not be correct), except that this did not work, as it did not hold the aspect ratio, but instead just made sure the width was only 77.2% of the containing element.

注意:正如您从我上面的代码片段中看到的那样，当我尝试

note: as you can see from my above snippet, I am using a padding as I attempted the padding trick for this but as @Michael_B pointed out this does not work. As I have no other working code I have not been able to replace it out yet.

有人知道如何保持弹性项目的宽高比，同时又增加高度 来填充文档的其余部分(当然还有空白)

Does anyone know how to keep a flex-item aspect ratio while at the same time growing it's height to fill the rest of the document (of course, with the margins)

谢谢.

推荐答案

使用纵横比计算器，我们可以确定8.5 x 11相当于8 x 10(80％x 100％).

Using an aspect ratio calculator, we can determine that 8.5 x 11 is equivalent to 8 x 10 (80% x 100%).

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

Using CSS viewport percentage units, we can set an element's height to emulate letter-size paper on all screen sizes.

这是基本代码:

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

这篇关于保持弹性项目的长宽比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！