Блог

Главная - Вопросы по программированию - CSS: как содержать абсолютный элемент внутри контейнера окна

CSS: как содержать абсолютный элемент внутри контейнера окна

#javascript #css #screen

#javascript #css #экран

Вопрос:

Есть способ с помощью CSS содержать абсолютный div внутри контейнера окна? (Если позиция div ширина div> window.innerWidth, переведите div влево)

Я пытаюсь реализовать навигационное меню на 100% CSS (https://codepen.io/team/css-tricks/pen/ZYoJda ) но когда у меня есть меню в правой части экрана, всплывающее меню разделяется по экрану.

Вот переработанный фрагмент:

 nav > ul > li {
  display: inline-block;
}
nav > ul > li ul {
  visibility: hidden;
  position: absolute;
  top: 105%;
  left: 0;
  transition: 0.2s 1s;
}

nav > ul > li ul li {
  width: 300px;
}
nav > ul > li:hover ul {
  visibility: visible;
  transition-delay: 0s;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
nav li {
  width: 100px;
  background: #eee;
  margin: 2px;
  position: relative;
  padding: 10px;
  width: 15%;
}
nav a {
  display: block;
  
}

div {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    min-height: 200px;
}

body {
  padding: 10px;
}  
 <div>
<nav>
  <ul>
    <li>No Menu 1</li>
    <li>No Menu 2</li>
    <li>Menu 3
      <ul>
        <li><a href="#">Menu 3-1</a></li>
        <li><a href="#">Menu 3-2</a></li>
        <li><a href="#">Menu 3-3</a></li>
      </ul>
    </li>
    <li>Menu 4
      <ul>
        <li><a href="#">Menu 4-1</a></li>
        <li><a href="#">Menu 4-2</a></li>
        <li><a href="#">Menu 4-3</a></li>
      </ul>
      </li>
    <li>
      Menu 5
      <ul>
        <li><a href="#">Menu 5-1</a></li>
        <li><a href="#">Menu 5-2</a></li>
        <li><a href="#">Menu 5-3</a></li>
      </ul>
    </li>
  </ul>
</nav>
</div>

Комментарии:

1. Это не имеет никакого смысла — «Есть способ с помощью CSS содержать абсолютный div внутри экрана?» Можете ли вы сделать вопрос более понятным относительно вашей проблемы

2. Я изменил вопрос, но, извините, я не знаю, как лучше понять вопрос.

3. что вы подразумеваете под contain? содержать что? что происходит, чего вы не хотите?

4. Проверьте фрагмент. Если вы наведете курсор мыши на меню 5, появится выпадающее меню, которое будет разделено. Я бы хотел, чтобы это выпадающее меню было сдвинуто влево (чтобы иметь все меню) и содержалось в этом контейнере (он же экран).

5. Я думаю, вопрос в том, как предотвратить выход подменю за правую границу меню и выровнять их с ним

Ответ №1:

Я нашел решение, используя JS (я бы предпочел CSS).

Я полагаю, что следующая структура:

 <ul>
  <li>Menu 1
    <ul class="dropdown">
      <li>Menu 1-1</li>
      <li>Menu 1-2</li>
    </ul>
  </li>
</ul>

Я реализую следующий JS:

 const menus = document.querySelectorAll('.dropdown');

menus.forEach(menu => {
  const info = menu.getBoundingClientRect();
  const position = info.left   info.width;

  if (position > window.innerWidth) {
    // Function to update style
    this.rdr.setStyle(menu, 'left', (window.innerWidth - position)   'px');
  }
});