保持弹性项目的长宽比 | 保持弹性项目的长宽比

本文介绍了保持弹性项目的长宽比的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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.

要填充垂直空间，我使用的是柔韧性盒，并且纸张是具有以下属性的柔韧性项目: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.

注意:正如您从我上面的代码片段中看到的那样，当我尝试，但正如@Michael_B指出的那样，此方法不起作用.由于我没有其他可用的代码，因此我还无法替换掉它.

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.

谢谢.

推荐答案

使用纵横比计算器，我们可以确定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>

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