代码之家  ›  专栏  ›  技术社区  ›  Jez

使flexbox容器覆盖内容高度?[副本]

  •  1
  • Jez  · 技术社区  · 7 年前

    我正在尝试使用Flexbox来获得一个布局,在这个布局中,我在顶部有一个条,页面其余部分有内容。测试用例位于:

    http://game-point.net/misc/flextest/

    有趣的是,Google Chrome已经按我所希望的方式运行了;当视口的垂直尺寸太小时(所有浏览器似乎都按我所希望的水平方向运行),浏览器中的内容 content 内容 分区。区别在于:

    铬:
    Pic of Chrome

    非铬:
    Pic of Not Chrome

    以下哪种浏览器正确实现了flexbox,如何让Firefox和Edge像Chrome那样只滚动内容框,而不是滚动整个视口?

    2 回复  |  直到 7 年前
        1
  •  0
  •   codeth    7 年前

    如果它不违背项目中的其他理想,您可以固定容器的高度,以便可滚动区域正确呈现。

    div.header {
      height: 72px;
    }
    
    div.content-container {
      height: calc(100% - 72px);
    }
    
        2
  •  0
  •   Jez    7 年前

    结果发现我需要移除 content-container 就这样 content container 部门。