Как сделать так, чтобы высота элемента покрытия превышала видимую область окна? - PullRequest
Новая
       0

Как сделать так, чтобы высота элемента покрытия превышала видимую область окна?

2 голосов
/ 14 февраля 2020

Я пытаюсь сделать так, чтобы полная высота элемента с абсолютным положением относительно тела простиралась до верха всей страницы, включая пространство, которое не видно. только при прокрутке

В этом примере боковая панель проходит вдоль видимого вида окна, если пользователь прокручивает отмеченное пространство, которое не закрыто,

Как можно сделать высоту элемент обложки больше чем видимая область окна?

Заранее спасибо 

body {
    font-family: sans-serif;
    margin: 0;
}

.container {
  width: 300px;
  margin: 0 auto;
  border: 1px dashed grey;
  padding: 10px;
}

ul.items {
  list-style: none;
  margin: 0;
  border: 1px dotted orange;
  padding: 10px;
}

ul.items li {
  margin: 10px;
  padding: 10px;
  border: 1px solid darkturquoise;
}

nav.menu {
    background-color: deeppink;
    padding: 10px;
    position: absolute;
    width: 80px;
    top: 0;
    height: 100vh;
}

nav.menu ul {
    list-style: none;
    padding-left: 0;
}

nav.menu ul {
    margin: 0;
}
<div class="container">
    <ul class="items">
      <li>item-1</li>
      <li>item-2</li>
      <li>item-3</li>
      <li>item-4</li>
      <li>item-5</li>
      <li>item-6</li>
      <li>item-7</li>
      <li>item-8</li>
      <li>item-9</li>
      <li>item-10</li>
      <li>item-11</li>
      <li>item-12</li>
      <li>item-13</li>
      <li>item-14</li>
      <li>item-15</li>
      <li>item-16</li>
      <li>item-17</li>
      <li>item-18</li>
      <li>item-19</li>
      <li>item-20</li>
      <li>item-21</li>
      <li>item-22</li>
      <li>item-23</li>
      <li>item-24</li>
      <li>item-25</li>
      <li>item-26</li>
      <li>item-27</li>
      <li>item-28</li>
      <li>item-29</li>
      <li>item-30</li>
      <li>item-31</li>
      <li>item-32</li>
      <li>item-33</li>
      <li>item-34</li>
      <li>item-35</li>
      <li>item-36</li>
      <li>item-37</li>
      <li>item-38</li>
      <li>item-39</li>
      <li>item-40</li>
      <li>item-41</li>
      <li>item-42</li>
      <li>item-43</li>
      <li>item-44</li>
      <li>item-45</li>
      <li>item-46</li>
      <li>item-47</li>
      <li>item-48</li>
      <li>item-49</li>
      <li>item-50</li>
    </ul>
  </div>
  <nav class="menu">
      <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
      </ul>
  </nav>

Ответы [ 2 ]

1 голос
/ 14 февраля 2020

Я нашел 4 решения с немного отличающимся поведением и подходами.

Первое решение

сделайте ваш nav контейнер (body в вашем случае) position: relative, это будет иметь смысл nav position: absolute, и теперь вы можете выбрать nav's height: 100% или bottom: 0.

Недостаток - прокрутка меню с элементами . 

body {
    font-family: sans-serif;
    margin: 0;
    position: relative;
}

.container {
  width: 300px;
  margin: 0 auto;
  border: 1px dashed grey;
  padding: 10px;
}

ul.items {
  list-style: none;
  margin: 0;
  border: 1px dotted orange;
  padding: 10px;
}

ul.items li {
  margin: 10px;
  padding: 10px;
  border: 1px solid darkturquoise;
}

nav.menu {
    background-color: deeppink;
    padding: 10px;
    position: absolute;
    width: 80px;
    top: 0;
    bottom: 0;
}

nav.menu ul {
    list-style: none;
    padding-left: 0;
}

nav.menu ul {
    margin: 0;
}
<div class="container">
    <ul class="items">
      <li>item-1</li>
      <li>item-2</li>
      <li>item-3</li>
      <li>item-4</li>
      <li>item-5</li>
      <li>item-6</li>
      <li>item-7</li>
      <li>item-8</li>
      <li>item-9</li>
      <li>item-10</li>
      <li>item-11</li>
      <li>item-12</li>
      <li>item-13</li>
      <li>item-14</li>
      <li>item-15</li>
      <li>item-16</li>
      <li>item-17</li>
      <li>item-18</li>
      <li>item-19</li>
      <li>item-20</li>
      <li>item-21</li>
      <li>item-22</li>
      <li>item-23</li>
      <li>item-24</li>
      <li>item-25</li>
      <li>item-26</li>
      <li>item-27</li>
      <li>item-28</li>
      <li>item-29</li>
      <li>item-30</li>
      <li>item-31</li>
      <li>item-32</li>
      <li>item-33</li>
      <li>item-34</li>
      <li>item-35</li>
      <li>item-36</li>
      <li>item-37</li>
      <li>item-38</li>
      <li>item-39</li>
      <li>item-40</li>
      <li>item-41</li>
      <li>item-42</li>
      <li>item-43</li>
      <li>item-44</li>
      <li>item-45</li>
      <li>item-46</li>
      <li>item-47</li>
      <li>item-48</li>
      <li>item-49</li>
      <li>item-50</li>
    </ul>
  </div>
  <nav class="menu">
      <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
      </ul>
  </nav>

Второй раствор

make nav position: fixed и bottom: 0 или height: 100% или height: 100vh.

В этом случае меню всегда отображается при прокрутке элементов. 

body {
    font-family: sans-serif;
    margin: 0;
}

.container {
  width: 300px;
  margin: 0 auto;
  border: 1px dashed grey;
  padding: 10px;
}

ul.items {
  list-style: none;
  margin: 0;
  border: 1px dotted orange;
  padding: 10px;
}

ul.items li {
  margin: 10px;
  padding: 10px;
  border: 1px solid darkturquoise;
}

nav.menu {
    background-color: deeppink;
    padding: 10px;
    position: fixed;
    width: 80px;
    top: 0;
    bottom: 0;
}

nav.menu ul {
    list-style: none;
    padding-left: 0;
}

nav.menu ul {
    margin: 0;
}
<div class="container">
    <ul class="items">
      <li>item-1</li>
      <li>item-2</li>
      <li>item-3</li>
      <li>item-4</li>
      <li>item-5</li>
      <li>item-6</li>
      <li>item-7</li>
      <li>item-8</li>
      <li>item-9</li>
      <li>item-10</li>
      <li>item-11</li>
      <li>item-12</li>
      <li>item-13</li>
      <li>item-14</li>
      <li>item-15</li>
      <li>item-16</li>
      <li>item-17</li>
      <li>item-18</li>
      <li>item-19</li>
      <li>item-20</li>
      <li>item-21</li>
      <li>item-22</li>
      <li>item-23</li>
      <li>item-24</li>
      <li>item-25</li>
      <li>item-26</li>
      <li>item-27</li>
      <li>item-28</li>
      <li>item-29</li>
      <li>item-30</li>
      <li>item-31</li>
      <li>item-32</li>
      <li>item-33</li>
      <li>item-34</li>
      <li>item-35</li>
      <li>item-36</li>
      <li>item-37</li>
      <li>item-38</li>
      <li>item-39</li>
      <li>item-40</li>
      <li>item-41</li>
      <li>item-42</li>
      <li>item-43</li>
      <li>item-44</li>
      <li>item-45</li>
      <li>item-46</li>
      <li>item-47</li>
      <li>item-48</li>
      <li>item-49</li>
      <li>item-50</li>
    </ul>
  </div>
  <nav class="menu">
      <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
      </ul>
  </nav>

Третье решение

Вы можете изменить структуру.

Сделать несколько wrapper из menu и container. Переместите menu выше container. Сделайте wrapper display: flex. Вы можете удалить position: absolute и top: 0 из menu.

Как и в первом решении - menu свитки с элементами. 

body {
  font-family: sans-serif;
  margin: 0;
}

.container {
  width: 300px;
  margin: 0 auto;
  border: 1px dashed grey;
  padding: 10px;
}

ul.items {
  list-style: none;
  margin: 0;
  border: 1px dotted orange;
  padding: 10px;
}

ul.items li {
  margin: 10px;
  padding: 10px;
  border: 1px solid darkturquoise;
}

nav.menu {
  background-color: deeppink;
  padding: 10px;
  width: 80px;
}

nav.menu ul {
  list-style: none;
  padding-left: 0;
}

nav.menu ul {
  margin: 0;
}

.wrapper {
  display: flex;
}
<div class="wrapper">
  <nav class="menu">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </nav>
  <div class="container">
    <ul class="items">
      <li>item-1</li>
      <li>item-2</li>
      <li>item-3</li>
      <li>item-4</li>
      <li>item-5</li>
      <li>item-6</li>
      <li>item-7</li>
      <li>item-8</li>
      <li>item-9</li>
      <li>item-10</li>
      <li>item-11</li>
      <li>item-12</li>
      <li>item-13</li>
      <li>item-14</li>
      <li>item-15</li>
      <li>item-16</li>
      <li>item-17</li>
      <li>item-18</li>
      <li>item-19</li>
      <li>item-20</li>
      <li>item-21</li>
      <li>item-22</li>
      <li>item-23</li>
      <li>item-24</li>
      <li>item-25</li>
      <li>item-26</li>
      <li>item-27</li>
      <li>item-28</li>
      <li>item-29</li>
      <li>item-30</li>
      <li>item-31</li>
      <li>item-32</li>
      <li>item-33</li>
      <li>item-34</li>
      <li>item-35</li>
      <li>item-36</li>
      <li>item-37</li>
      <li>item-38</li>
      <li>item-39</li>
      <li>item-40</li>
      <li>item-41</li>
      <li>item-42</li>
      <li>item-43</li>
      <li>item-44</li>
      <li>item-45</li>
      <li>item-46</li>
      <li>item-47</li>
      <li>item-48</li>
      <li>item-49</li>
      <li>item-50</li>
    </ul>
  </div>
</div>

Четвертое решение

структура, как в третьем решении.

Но мы делаем menu с position: sticky, top: 0 и height: calc(100vh - 10px * 2); (верхнее и нижнее значение отступа 10px, если не вычитать, прокрутки меню немного внизу прокрутки пунктов)

Меню всегда видно. 

body {
  font-family: sans-serif;
  margin: 0;
}

.container {
  width: 300px;
  margin: 0 auto;
  border: 1px dashed grey;
  padding: 10px;
}

ul.items {
  list-style: none;
  margin: 0;
  border: 1px dotted orange;
  padding: 10px;
}

ul.items li {
  margin: 10px;
  padding: 10px;
  border: 1px solid darkturquoise;
}

nav.menu {
  background-color: deeppink;
  padding: 10px;
  width: 80px;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  height: calc(100vh - 10px * 2); /*top + bottom padding value*/
}

nav.menu ul {
  list-style: none;
  padding-left: 0;
}

nav.menu ul {
  margin: 0;
}

.wrapper {
  display: flex;
}
<div class="wrapper">
  <nav class="menu">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </nav>
  <div class="container">
    <ul class="items">
      <li>item-1</li>
      <li>item-2</li>
      <li>item-3</li>
      <li>item-4</li>
      <li>item-5</li>
      <li>item-6</li>
      <li>item-7</li>
      <li>item-8</li>
      <li>item-9</li>
      <li>item-10</li>
      <li>item-11</li>
      <li>item-12</li>
      <li>item-13</li>
      <li>item-14</li>
      <li>item-15</li>
      <li>item-16</li>
      <li>item-17</li>
      <li>item-18</li>
      <li>item-19</li>
      <li>item-20</li>
      <li>item-21</li>
      <li>item-22</li>
      <li>item-23</li>
      <li>item-24</li>
      <li>item-25</li>
      <li>item-26</li>
      <li>item-27</li>
      <li>item-28</li>
      <li>item-29</li>
      <li>item-30</li>
      <li>item-31</li>
      <li>item-32</li>
      <li>item-33</li>
      <li>item-34</li>
      <li>item-35</li>
      <li>item-36</li>
      <li>item-37</li>
      <li>item-38</li>
      <li>item-39</li>
      <li>item-40</li>
      <li>item-41</li>
      <li>item-42</li>
      <li>item-43</li>
      <li>item-44</li>
      <li>item-45</li>
      <li>item-46</li>
      <li>item-47</li>
      <li>item-48</li>
      <li>item-49</li>
      <li>item-50</li>
    </ul>
  </div>
</div>
1 голос
/ 14 февраля 2020

Просто установите высоту вашего меню на 100% и присвойте телу position: relative;

body {
    font-family: sans-serif;
    margin: 0;
    position: relative;
}

.container {
  width: 300px;
  margin: 0 auto;
  border: 1px dashed grey;
  padding: 10px;
}

ul.items {
  list-style: none;
  margin: 0;
  border: 1px dotted orange;
  padding: 10px;
}

ul.items li {
  margin: 10px;
  padding: 10px;
  border: 1px solid darkturquoise;
}

nav.menu {
    background-color: deeppink;
    padding: 10px;
    position: absolute;
    width: 80px;
    top: 0;
    height: 100%;
}

nav.menu ul {
    list-style: none;
    padding-left: 0;
}

nav.menu ul {
    margin: 0;
}
<div class="container">
    <ul class="items">
      <li>item-1</li>
      <li>item-2</li>
      <li>item-3</li>
      <li>item-4</li>
      <li>item-5</li>
      <li>item-6</li>
      <li>item-7</li>
      <li>item-8</li>
      <li>item-9</li>
      <li>item-10</li>
      <li>item-11</li>
      <li>item-12</li>
      <li>item-13</li>
      <li>item-14</li>
      <li>item-15</li>
      <li>item-16</li>
      <li>item-17</li>
      <li>item-18</li>
      <li>item-19</li>
      <li>item-20</li>
      <li>item-21</li>
      <li>item-22</li>
      <li>item-23</li>
      <li>item-24</li>
      <li>item-25</li>
      <li>item-26</li>
      <li>item-27</li>
      <li>item-28</li>
      <li>item-29</li>
      <li>item-30</li>
      <li>item-31</li>
      <li>item-32</li>
      <li>item-33</li>
      <li>item-34</li>
      <li>item-35</li>
      <li>item-36</li>
      <li>item-37</li>
      <li>item-38</li>
      <li>item-39</li>
      <li>item-40</li>
      <li>item-41</li>
      <li>item-42</li>
      <li>item-43</li>
      <li>item-44</li>
      <li>item-45</li>
      <li>item-46</li>
      <li>item-47</li>
      <li>item-48</li>
      <li>item-49</li>
      <li>item-50</li>
    </ul>
  </div>
  <nav class="menu">
      <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
      </ul>
  </nav>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...