固定容器位于身体的滚动顶部答案

【问题标题】：Fixed container positioned on top of the body's scroll固定容器位于身体的滚动顶部
【发布时间】：2018-10-15 18:08:03
【问题描述】：

我们正在体验位于正文滚动顶部的固定容器（即使是：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%;

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

谢谢

【问题讨论】：

固定元素的样式是什么？
用这些编辑，但基本上是width:100%; top: 0; position:fixed;

标签： css fixed

【解决方案1】：

您可以从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>

【讨论】：

【解决方案2】：

我们需要查看您的所有代码，但您的 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>

【讨论】：