如何获得高度等于2/3可用空间的布局

Question

如何在CSS中实现这样的布局：

• 第一层具有可变内容。
• 在此图层下必须是具有约66％左边空间（高度）的图层。
• 最后是一层覆盖其余自由空间的层。

该决议应该处理IE11。

• 从IE网格模块的原因不是解决方案。
• 从第一层定位的可变内容与相对和绝对属性的原因也不是一个好主意。

问题是计算第一层下的自由空间的高度。

看起来唯一的解决方案是一个相当新的css模块＆＃39; flex＆＃39;但是我没有达到理想的效果。 有可能吗？

Answer 1

页面内容仅限于可视区域的100％，可变内容尽可能多地给出，剩下的空间将占用剩下的任何内容。然后将剩余的空间分成三分之一的div和另外三分之一的div（分别为66.6％和33.3％） - 我对它们进行了颜色编码，以便您可以清楚地看到它们。

我希望这会有所帮助，而且我知道你可能试图自己解决这个问题但是并没有把它包含在你的问题中，只是试着更深入地证明你已经去了努力回答你自己的答案，因为这是该网站的一般礼仪：）

＆＃13;

＆＃13;

body { margin: 0; }

#page-contents { height: 100vh; display: flex; flex-direction: column; }
#page-contents #variable-content { padding: 15px; background: red; color: white; flex: 0 1 auto; }

#page-contents #remaining-space { flex: 0 1 100%; background: blue; display: flex; flex-direction: column; }

#page-contents #remaining-space #two-thirds { flex: 0 0 66.6666%; background: yellow; }
#page-contents #remaining-space #one-third { flex: 0 0 33.3333%; background: orange; }

＆＃13;

<div id="page-contents">
  <div id="variable-content">
    <p>Hi my name is Michael</p>
  </div>
  <div id="remaining-space">
    <div id="two-thirds">
    </div>
    <div id="one-third">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

谢谢， 迈克尔