Требуется базовая справка по HTML

#html #css

#HTML #css

Вопрос:

Я просто хочу, чтобы панель навигации растянулась на всю высоту.

я совсем новичок в html, css и мало что знаю об этом. перепробовал почти все решения в Интернете, но по-прежнему ничего.ниже приведен стиль и html-код.Я предоставил всем родительским контейнерам полную высоту.Не знаю, что вызывает проблему. Я выбрал стиль из Интернета и понимаю, что большинство из них делает.Я не

 body,
html {
  height: 100vh;
}

div {
  overflow: hidden;
  height: 100%;
  position: relative;
  background-color: aqua;
}

nav {
  display: block;
  text-align: center;
  height: 100vh !important;
  float: left;
  position: absolute;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: unset !important;
}

.nav a {
  display: block;
  background: #111;
  color: #fff;
  text-decoration: none;
  padding: 0.8em 1.8em;
  text-transform: uppercase;
  font-size: 80%;
  letter-spacing: 2px;
  text-shadow: 0 -1px 0 #000;
  position: relative;
}

.nav {
  vertical-align: top;
  display: inline-block;
  box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;
  border-radius: 6px;
  height: 100vh !important;
}

.nav li {
  position: relative;
}

.nav>li {
  float: left;
  border-bottom: 4px #aaa solid;
  margin-right: 1px;
}

.nav>li>a {
  margin-bottom: 1px;
  box-shadow: inset 0 2em .33em -0.5em #555;
}

.nav>li:hover,
.nav>li:hover>a {
  border-bottom-color: orange;
}

.nav li:hover>a {
  color: orange;
}

.nav>li:first-child {
  border-radius: 4px 0 0 4px;
}

.nav>li:first-child>a {
  border-radius: 4px 0 0 0;
}

.nav>li:last-child {
  border-radius: 0 0 4px 0;
  margin-right: 0;
}

.nav>li:last-child>a {
  border-radius: 0 4px 0 0;
}

.nav li li a {
  margin-top: 1px;
}

.nav li a:first-child:nth-last-child(2):before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  top: 50%;
  right: 5px;
}
/* submenu positioning*/

.nav ul {
  position: absolute;
  white-space: nowrap;
  border-bottom: 5px solid orange;
  z-index: 1;
  left: -99999em;
}

.nav>li:hover>ul {
  left: auto;
  margin-top: 5px;
  min-width: 100%;
}

.nav>li li:hover>ul {
  left: 100%;
  margin-left: 1px;
  top: -1px;
}
/* arrow hover styling */

.nav>li>a:first-child:nth-last-child(2):before {
  border-top-color: #aaa;
}

.nav>li:hover>a:first-child:nth-last-child(2):before {
  border: 5px solid transparent;
  border-bottom-color: orange;
  margin-top: -5px
}

.nav li li>a:first-child:nth-last-child(2):before {
  border-left-color: #aaa;
  margin-top: -5px
}

.nav li li:hover>a:first-child:nth-last-child(2):before {
  border: 5px solid transparent;
  border-right-color: orange;
  right: 10px;
}

 <div>
  <nav>
    <ul class="nav">
      <li><a href="#">About</a></li>
      <li>
        <a href="#">Portfolio</a>
        <ul>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Resume</a>
        <ul>
          <li><a href="#">item a lonng submenu</a></li>
          <li>
            <a href="#">item</a>
            <ul>
              <li><a href="#">Ray</a></li>
              <li><a href="#">Veronica</a></li>
              <li><a href="#">Bushy</a></li>
              <li><a href="#">Havoc</a></li>
            </ul>
          </li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
        </ul>
      </li>
      <li><a href="#">Download</a></li>
      <li>
        <a href="#">Rants</a>
        <ul>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
          <li><a href="#">item</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>




    </ul>
  </nav>
</div>

1. Чего именно вы хотите? Пожалуйста, добавьте еще несколько деталей.

2. Комбинация многих ваших стилей не имеет особого смысла.

3. Вам нужно вертикальное меню? Пожалуйста, будьте более конкретными, чтобы мы могли вам помочь 🙂

4. Я думаю, вы хотите растянуть навигацию на всю высоту окна? Поправьте меня, если я ошибаюсь. Спасибо

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

Ответ №1:

почему вы хотите установить максимальную высоту элемента nav равной 100vh? Если вы хотите, чтобы он использовал полную ширину, вам нужно установить ширину: 100vw; vw = «Относительно 1% ширины окна просмотра», а vh это высота.

простая панель будет выглядеть как:

 <body>
<nav></nav>
</body>

<script>
    body { padding: 0; margin: 0}
    nav { width: 100vw;height: 50px;background-color: blue;position: fixed;top: 0}
</script>