修复了位于 body 滚动条顶部的容器

Question

我们正在体验位于 body 滚动条顶部的固定容器（即使有：box-sizing: border-box;），具有以下样式：

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
z-index: 100;
width: 100%;
height: 71px;
background-color: #115191;
box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1);
font-family: 'Lato', sans-serif;
position: fixed;
top: 0;
box-sizing: border-box;

但是如果我像这样设置宽度：

width: calc(100% - 17px )

那就是我们期望的（至少在chrome，其他browsers/versions必须有不同的滚动宽度）

html标签的样式：

height: 100%;
overflow-y: auto;

body:

padding: 0;
margin: 0;
background-color: #f7f7f7;
min-height: 100%;

知道是什么原因造成的以及如何预防吗？

谢谢

Answer 1

我们需要查看您的所有代码，但您可能在 html/body 处有 margin:0。没有它，它工作

html,
body {
  height: 100%;
  overflow-y: auto;
}

.fixed {
  position: fixed;
  height: 70px;
  background-color: blue;
  top: 0;
  width: 100%
}

.content{
  height: 2000px
}

<div class="fixed"></div>
<div class="content">
</div>

当我添加边距时，我遇到了与您遇到的相同问题

html,
body {
  height: 100%;
  overflow-y: auto;
  margin: 0;
}

.fixed {
  position: fixed;
  height: 70px;
  background-color: blue;
  top: 0;
  width: 100%
}

.content{
  height: 2000px
}

<div class="fixed"></div>
<div class="content">
</div>

Answer 2

您可以从 html、body 元素中删除滚动并将其添加到内容包装器。在此示例中，它是 main 元素。

Html 例子

<body>
  <header>Header</header>
  <main>
    <!--All page content goes here-->
  </main>
</body>

删除默认页面滚动

body, html {
  height: 100%;
  overflow: hidden;
}

为内容包装添加滚动和高度

main {
  margin-top: 40px;
  height: calc(100% - 40px);
  overflow: auto;
}

40px这里是固定表头的高度

header {
  ...
  height: 40px;
  ...
}

body, html {
  height: 100%;
  overflow: hidden;
  
  /*Some reset styles*/
  margin: 0;
  font-family: sans-serif;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  
  display: flex;
  align-items: center;
  
  height: 40px;
  background-color: gainsboro;
}

main {
  margin-top: 40px;
  height: calc(100% - 40px);
  overflow: auto;
}

header, main {
  padding-left: 15px;
  padding-right: 15px;
}

<header>Header</header>
<main>
  <h1>Title</h1>
  <h2>Title 2</h2>
  <h3>Title 3</h3>
  <p>The Lost World is a novel released in 1912 by Sir Arthur Conan Doyle concerning an expedition to a plateau in the Amazon basin of South America where prehistoric animals (dinosaurs and other extinct creatures) still survive. It was originally published serially in the popular Strand Magazine and illustrated by New-Zealand-born artist Harry Rountree during the months of April–November 1912. The character of Professor Challenger was in thrusting book. The novel also describes a war between indigenous people and a vicious tribe of ape-like creatures.</p>
  <p>The Lost World is a novel released in 1912 by Sir Arthur Conan Doyle concerning an expedition to a plateau in the Amazon basin of South America where prehistoric animals (dinosaurs and other extinct creatures) still survive. It was originally published serially in the popular Strand Magazine and illustrated by New-Zealand-born artist Harry Rountree during the months of April–November 1912. The character of Professor Challenger was in thrusting book. The novel also describes a war between indigenous people and a vicious tribe of ape-like creatures.</p>
</main>

修复了位于 body 滚动条顶部的容器

Fixed container positioned on top of the body's scroll

css

fixed