Почему переполнение: скрытый работает только в Chrome, а не в Firefox - PullRequest
Новая
       33

Почему переполнение: скрытый работает только в Chrome, а не в Firefox

0 голосов
/ 25 марта 2019

свойство overflow: hidden работает в Google Chrome, а не в Firefox и Microsoft Edge. Я использую его, чтобы задать полную высоту страницы для боковой панели, чтобы она имела одинаковый рост.

Style: 

.sidebar {
   position:absolute;
   width: 225px;
   background-color: #4b4b4b;
   margin-bottom: -5000px;
   padding-bottom: 5000px;
   overflow: hidden;
  }

HTML: 

<div class="sidebar">
    <div class="nav-item active">
    <a class="nav-link border-bottom border-warning {{Request::path()=='home' ? 'selectioné' : ''}}" href="home"><span>Dashboard</span></a>
    </div>
    <div class="nav-item">
    <a class="nav-link border-bottom border-warning {{Request::path()=='register' ? 'selectioné' : ''}}" href="register"><span>Ajout Compte</span></a>
    </div>
    <div class="nav-item">
    <a class="nav-link border-bottom border-warning" href="*******"><span>*******</span></a>
    </div>
    <div class="nav-item">
    <a class="nav-link border-bottom border-warning" href="/telescope" target="_blank"><span>Telescope</span></a>
    </div>
    <div class="nav-item">
    <a class="nav-link border-bottom border-warning" href="tables.html"><span>Tables3</span></a>
    </div>
    <div class="nav-item">
    <a class="nav-link border-bottom border-warning" href="tables.html"><span>Tables4</span></a>
    </div>
</div>

тело: 

body {
  position: relative;
  min-height: 100vh;
  padding-bottom: 4.5rem;
 }

сноска: 

footer {
   position: absolute;
   border-radius: 12px;
   right: 0;
   bottom: 0;
   width: calc(100% - 225px);
   height: 80px;
   background-color: #e2e2e2;
  text-align: center;
  padding-top: 28px;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

главный: 

.main {
  width: 100%;
  padding-left: 225px;
  padding-top: 11px;
  padding-bottom: 30px;
}

как я могу заставить это работать во всех браузерах?

Ответы [ 2 ]

0 голосов
/ 25 марта 2019

попробуйте это: 

.sidebar {
  width: 225px;
  background-color: #4b4b4b;
  position: absolute;
  top: 60px;
  bottom: 0;
}
0 голосов
/ 25 марта 2019

Удалите margin-bottom: -5000px; padding-bottom: 5000px; из .sidebar css и добавьте min-height: 100vh;, надеюсь, это решит вашу проблему. Спасибо 

.sidebar {
   position:absolute;
   width: 225px;
   min-height: 100vh;
   background-color: #4b4b4b;
   overflow: hidden;
}
...