Наконечник навбара с корпусом 100%

Question

Я создаю приложение для реагирования и имею bootstrap набавр, который является липким верхом. Я установил тело как height: 100%, и когда я делаю это, навигационная панель больше не прилипает. Я не могу использовать vh для одной из своих страниц, так как это портит контент на мобильных устройствах, поэтому я хотел бы придерживаться процентов. Есть ли способ сделать это? Я включил код, чтобы сделать тело 100%.

html,
body,
#root {
  height: 100%;
  max-height: 100%;
}

Answer 1

вы можете использовать свойство position CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/position).

При необходимости можно использовать также свойство z-index (https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)

Пример:

HTML

<div id="root">
  <nav>
    <div>item</div>
    <div>item</div>
    <!-- ... -->
    <div>item</div>
    <div>item</div>
  </nav>
  <main>
    <!-- ... -->
  </main>
</div>

CSS

#root {
    /* necessary */
    position: relative;
    height: 100vh;
}

nav {
    /* necessary */
    position: sticky; // you can also use 'fixed' value
    top: 0;
    left: 0;
    right: 0;

    /* not necessary */
    background-color: red;
    height: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

main {
  /* necessary */
  overflow: hidden auto;
  /* margin-top: 2rem; if you have used fixed value */

  /* not necessary */
  height: 200%;
  background-color: green;
}