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

在firefox/chrome/safari中,具有溢出和引导导航条的flex是不同的。

bootstrap-4 flexbox firefox css html

InvisiblePanda · 技术社区 · 6 年前

当我使用firefox显示下面的代码片段时, div 随班 h-100 已分配整页高度( 100vh )的高度 nav 然后添加以生成第二个滚动条。

我想要的只是 div 具有 overflow-y: auto 应该有一个滚动条。

奇怪的是,在Chrome和Safari中,代码的行为似乎和我想要的一样。

我的HTML/CSS有问题吗?我如何解决这种行为差异?

.grey {
  background-color: grey;
}

#foo {
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div id="root">
  <div style="height: 100vh; display: flex; flex-direction: column">
    <nav class="navbar navbar-dark navbar-expand bg-dark"><a class="navbar-brand" href="/">Title</a></nav>
    <div class="h-100" style="display: flex; flex-direction: row">
      <div style="flex: 1 1 auto; overflow-y: auto">
        <div id="foo" style="height: 1200px">
        </div>
      </div>
    </div>
  </div>
</div>

1 回复 | 直到 6 年前

Joykal Infotech 6 年前

将溢出设置为隐藏到父分区。

.grey {
  background-color: grey;
}

#foo {
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div id="root">
  <div style="height: 100vh; display: flex; flex-direction: column">
    <nav class="navbar navbar-dark navbar-expand bg-dark"><a class="navbar-brand" href="/">Title</a></nav>
    <div class="h-100" style="display: flex; overflow: hidden; flex-direction: row">
      <div style="flex: 1 1 auto; overflow-y: auto">
        <div id="foo" style="height: 1200px">
        </div>
      </div>
    </div>
  </div>
</div>

推荐文章

seriously · 按钮中元素的对齐

2 年前

USK · 引导模型在我的HTML文件中不起作用

2 年前

onit · 如何在单击按钮时从页面(引导程序4)隐藏或删除搜索表单?

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

user9644796 · 如何检查折叠的导航栏是否打开?

6 年前

JoeSlav · 使用引导上载损坏的文件

6 年前

John · 引导程序4,表单内联未在XS视图上对齐

6 年前

J. Sparks · 奇怪的图像定位(HTML、CSS、Bootstrap)

6 年前

user9719859 · 如何在bootstrap 4中更改选择选项programmaticaly?

6 年前

im5an · 如何使用angular在单行中显示徽标和导航栏?

6 年前