Исправлен контейнер, расположенный над свитком тела - PullRequest
Новая
       16

Исправлен контейнер, расположенный над свитком тела

0 голосов
/ 15 октября 2018

Мы экспериментируем. Фиксированный контейнер расположен над свитком тела (даже с: 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;

enter image description here

но если я установлю ширину, как это:

width: calc(100% - 17px )

, то это то, что мы ожидаем (по крайней мере, в Chrome, другие браузеры / версии должны иметь другую ширину прокрутки)

enter image description here

Стили тега html: 

height: 100%;
overflow-y: auto;

body: 

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

любая идея, которая 'Это и как предотвратить это?

спасибо

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Вы можете удалить прокрутку из элементов 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>
0 голосов
/ 15 октября 2018

Нам нужно увидеть весь ваш код, но у вас, вероятно, есть margin:0 в html / body.Без него работает 

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>
...