Почему высота навигации не подстраивается автоматически под его содержимое?

Question

У меня в html есть следующий элемент nav:

<nav>
    <ul>
        <li><a href="content/unternehmen.html">Unternehmen</a><div class="navunderline"></div></li>
        <li><a href="content/leistungen.html">Leistungen</a><div class="navunderline"></div></li>
        <li><a href="content/referenzen.html">Referenzen</a><div class="navunderline"></div></li>
        <li><a href="content/news.html">News</a><div class="navunderline"></div></li>
        <li><a href="content/kontakt.html">Kontakt</a><div class="navunderline"></div></li>
    </ul>
</nav>

Мой CSS дизайн для обычного размера домашней страницы выглядит так:

nav {
    position: relative;
    background-color: #61625B;
    width: 100%;
    height: 100px;
}

    nav ul {
        position: absolute;
        bottom: 0;
        width: 70%;
        list-style: none;
        padding: 0 15%;
        display: flex;
        margin: 0;
    }

    nav li {
        width: 125px;
        text-align: center;
    }

.navunderline {
    width: 125px;
    height: 0;
    margin: 5px 0 0 0;
    background-color: #DAD9D7;
    transition: 500ms;
}

nav a {
    color: #DAD9D7;
}

    nav a:hover {
        text-decoration: none;
    }

nav li:hover .navunderline {
    height: 5px;
    margin: 0;
}

Это прекрасно работает. Однако для небольших дисплеев я хочу отображать элементы навигации по вертикали, поэтому у меня есть следующий код CSS:

@media screen and (max-width: 1000px) {
    nav {
        position: relative;
        background-color: #61625B;
        width: 100%;
        height: auto;
        overflow: visible;
        padding: 0;
        margin: 0;
    }

        nav ul {
            height: auto;
            bottom: 0;
            width: 100%;
            list-style: none;
            flex-direction: column;
            padding: 0;
        }

        nav li {
            width: 100%;
            text-align: center;
            margin: 0;
            padding: 0;
        }

    .navunderline {
        display: none;
    }

    nav li:hover {
        background-color: #8b131f;
    }
}

Вот проблема: height моего элемента nav в в этом случае установлено значение «Авто». Если я установил фиксированное значение, оно отображается правильно. Однако я хочу автоматически подстраивать его под размер содержимого. Проблема в том, что при установке высоты на auto элемент nav полностью исчезает до нулевой высоты. Как я могу установить его, чтобы его высота регулировалась элементами, которые он содержит?

nav {
    position: relative;
    background-color: #61625B;
    width: 100%;
    height: 100px;
}

    nav ul {
        position: absolute;
        bottom: 0;
        width: 70%;
        list-style: none;
        padding: 0 15%;
        display: flex;
        margin: 0;
    }

    nav li {
        width: 125px;
        text-align: center;
    }

.navunderline {
    width: 125px;
    height: 0;
    margin: 5px 0 0 0;
    background-color: #DAD9D7;
    transition: 500ms;
}

nav a {
    color: #DAD9D7;
}

    nav a:hover {
        text-decoration: none;
    }

nav li:hover .navunderline {
    height: 5px;
    margin: 0;
}


@media screen and (max-width: 1000px) {
    nav {
        position: relative;
        background-color: #61625B;
        width: 100%;
        height: auto;
        overflow: visible;
        padding: 0;
        margin: 0;
    }

        nav ul {
            height: auto;
            bottom: 0;
            width: 100%;
            list-style: none;
            flex-direction: column;
            padding: 0;
        }

        nav li {
            width: 100%;
            text-align: center;
            margin: 0;
            padding: 0;
        }

    .navunderline {
        display: none;
    }

    nav li:hover {
        background-color: #8b131f;
    }
}

<nav>
    <ul>
        <li><a href="content/unternehmen.html">Unternehmen</a><div class="navunderline"></div></li>
        <li><a href="content/leistungen.html">Leistungen</a><div class="navunderline"></div></li>
        <li><a href="content/referenzen.html">Referenzen</a><div class="navunderline"></div></li>
        <li><a href="content/news.html">News</a><div class="navunderline"></div></li>
        <li><a href="content/kontakt.html">Kontakt</a><div class="navunderline"></div></li>
    </ul>
</nav>

Answer 1

Проблема в том, что при установке высоты на auto элемент навигации полностью исчезает до нулевой высоты. Как я могу установить его, чтобы его высота регулировалась элементами, которые он содержит?

Эта проблема возникает, потому что ваш элемент ul имеет position: absolute. Благодаря этому свойству ваш элемент ul больше не «живет» в том же пространстве, что и обычный макет документа.

Чтобы исправить это, вы можете добавить это в свой медиа-запрос:

@media screen and (max-width: 1000px) {
  nav ul {
    position: relative;
    /* ... */
  }
}

nav {
  position: relative;
  background-color: #61625B;
  width: 100%;
  height: 100px;
}

nav ul {
  position: absolute;
  bottom: 0;
  width: 70%;
  list-style: none;
  padding: 0 15%;
  display: flex;
  margin: 0;
}

nav li {
  width: 125px;
  text-align: center;
}

.navunderline {
  width: 125px;
  height: 0;
  margin: 5px 0 0 0;
  background-color: #DAD9D7;
  transition: 500ms;
}

nav a {
  color: #DAD9D7;
}

nav a:hover {
  text-decoration: none;
}

nav li:hover .navunderline {
  height: 5px;
  margin: 0;
}

@media screen and (max-width: 1000px) {
  nav {
    position: relative;
    background-color: #61625B;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
  nav ul {
    position: relative; /* Add this */
    height: auto;
    bottom: 0;
    width: 100%;
    list-style: none;
    flex-direction: column;
    padding: 0;
  }
  nav li {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
  }
  .navunderline {
    display: none;
  }
  nav li:hover {
    background-color: #8b131f;
  }
}

<nav>
  <ul>
    <li>
      <a href="content/unternehmen.html">Unternehmen</a>
      <div class="navunderline"></div>
    </li>
    <li>
      <a href="content/leistungen.html">Leistungen</a>
      <div class="navunderline"></div>
    </li>
    <li>
      <a href="content/referenzen.html">Referenzen</a>
      <div class="navunderline"></div>
    </li>
    <li>
      <a href="content/news.html">News</a>
      <div class="navunderline"></div>
    </li>
    <li>
      <a href="content/kontakt.html">Kontakt</a>
      <div class="navunderline"></div>
    </li>
  </ul>
</nav>