html - Flex 页眉/内容/页脚在 IE 中导致不需要的滚动条,但在其他浏览器中不会
问题描述
您好,我有这个单一的 .html 文件。当我在 Chrome/Firefox/etc 中打开它时,它按预期工作,但是当我用 IE 打开它时,有一个不需要的垂直滚动条,它几乎没有“播放”。是什么原因造成的,我该如何解决?有没有更好的方法来使用 css 设置页眉/内容/页脚?
谢谢,这是一个屏幕截图。
html,
body {
height: 100%;
margin: 0;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
</style>
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
解决方案
有几种方法可以做到这一点。
方法1:最简单的方法是将滚动条隐藏在<style>
标签下,如下所示:
body {
overflow-y: hidden;
}
同样,overflow-x: hidden
将隐藏水平滚动条,overflow: hidden
并将隐藏水平和垂直滚动条。但是请注意,这不仅会隐藏滚动条,还会删除其功能。因此,如果您添加更多超出页面显示的内容,它将被切断。
方法2:如果你想隐藏滚动条但保留它的功能,那么将上面的代码替换为:
<style>
body::-webkit-scrollbar {
display: none;
}
</style>
这应该发生在所有浏览器中,以防您的问题在其他地方仍然存在。
方法 3:如果您希望仅针对 Internet Explorer发生这种情况,请尝试以下操作:
<style>
.container {
-ms-overflow-style: none;
overflow: auto;
}
</style>
推荐阅读
- android - 没有android studio就无法运行android模拟器
- python - 如何解决方法不可迭代的问题?
- python - 在网络抓取中寻找项目
- excel - 将工作表名称动态更改为单元格的值
- sql - 如何将值分组为百分位数并计算sql中其他列的总和和平均值?
- spring-boot - Spring Boot UserNotFound 消息
- android - Kotlin:是否可以从 Activity-1 的 Fragment 移动到 Activity-2
- node.js - Puppeteer 错误:节点不可见或不是 HTMLElement,但它是
- c++ - 为什么static_casting时值会发生变化?
- c# - 在 ASP.NET Core Web api 中读取 JSON 值