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

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

flexbox google-chrome css html javascript

Jez · 技术社区 · 7 年前

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

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

铬:

非铬:

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

2 回复 | 直到 7 年前

codeth 7 年前

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

div.header {
  height: 72px;
}

div.content-container {
  height: calc(100% - 72px);
}

Jez 7 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

10 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

10 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

10 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

10 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

10 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

11 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

11 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

11 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

11 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

11 月前