Question

我们正在使用位于以下位置的样式（位于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中，其他浏览器/版本必须具有不同的滚动宽度）

html标记的样式：

height: 100%;
overflow-y: auto;

正文：

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>

删除dafault页面滚动

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>

固定在身体滚动条上方的容器

2 个答案: