Можете ли вы расположить фиксированный элемент в окне просмотра по вертикали, но в родительском элементе по горизонтали? - PullRequest
Новая
       8

Можете ли вы расположить фиксированный элемент в окне просмотра по вертикали, но в родительском элементе по горизонтали?

0 голосов
/ 21 ноября 2018 

/* position */
.container {
    width: 40vw;
    margin: 0 auto;
    position: relative;
}

#footer {
  position: fixed;
  bottom: 0;
}

/* style */
p {
  padding: 10px;
  margin: 10px;
}

#body p {
  background-color: #eee;
}

#footer p {
  background-color: #303030;
  color: white;
}
<div class="container">
  <div id="body">
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
  </div>
  <div id="footer">
    <p>this is the footer content</p>
  </div>
</div>

(тот же код на https://jsfiddle.net/bxkgL9zs/4/, если вы предпочитаете)

, как вы можете видеть, липкий элемент нижнего колонтитула: 

#footer {
    position: fixed;
    bottom: 0;
}

, кажется, содержится внутри элемента контейнера: 

.container {
    width: 40vw;
    margin: 0 auto;
    position: relative;
}

, поскольку он не застрял полностью слева от экрана, как вы ожидаете.

Мой вопрос: как я могу сделать нижний колонтитул полностью заполненным контейнером, но при этом зафиксировать его в нижней части экрана, как сейчас?

Я бы подумал, right: auto сделает это, поскольку left: auto (что сейчас), кажется, правильно поместил его в контейнер слева.

Ответы [ 3 ]

0 голосов
/ 21 ноября 2018

Когда вы устанавливаете position: fixed;

Элемент удаляется из обычного потока документа, не создавая места для элемента в структуре страницы.Он позиционируется относительно начального блока контейнера, установленного в окне просмотра, за исключением случаев, когда один из его предков должен преобразовать, просмотреть или отфильтровать набор свойств для чего-то отличного от нуля (см. Спецификацию преобразований CSS), и в этом случае этот предок ведет себя какконтейнер, содержащий блок.(Обратите внимание, что существуют несоответствия с перспективой браузера и фильтром, вносящим вклад в контейнерный блок, содержащий формирование.) Его положение определяется как заканчивающееся значениями top, right, bottom и left.Это значение всегда создает новый контекст стека.В печатных документах элемент размещается в одной и той же позиции на каждой странице.

Так вот почему ваш #footer выравнивается внизу, но не по левому краю, потому что левая позицияпо умолчанию относительно блока контейнера в вашем случае container

Если вы хотите, чтобы нижний колонтитул перешел влево, просто добавьте 

#footer {
  position: fixed;
  bottom: 0;
  left: 0;      //add this
}

Если вы хотите, чтобы #footer находился в фактической позициино заполняя все пространство контейнера, просто добавьте 

#footer {
  position: fixed;
  bottom: 0;
  width: 40vw;    //add the same width of the container
}

, чтобы лучше понять позиционирование, прочитайте это https://developer.mozilla.org/es/docs/Web/CSS/position

0 голосов
/ 21 ноября 2018

Используйте ту же ширину, что и контейнер, и сделайте p внутри него равным inline-block, чтобы вы могли легко центрировать его: 

/* position */
.container {
    width: 40vw;
    margin: 0 auto;
    position: relative;
}

#footer {
  position: fixed;
  bottom: 0;
  text-align:center;
    width: 40vw;
}

/* style */
p {
  padding: 10px;
  margin: 10px;
}

#body p {
  background-color: #eee;
}

#footer p {
  background-color: #303030;
  color: white;
  display:inline-block;
}
<div class="container">
  <div id="body">
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
  </div>
  <div id="footer">
    <p>this is the footer content</p>
  </div>
</div>
0 голосов
/ 21 ноября 2018

Добавьте width: 40vw; в нижний колонтитул, просто так ... 

/* position */
.container {
    width: 40vw;
    margin: 0 auto;
    position: relative;
}

#footer {
  position: fixed;
  bottom: 0;
  width: 40vw;
}

/* style */
p {
  padding: 10px;
  margin: 10px;
}

#body p {
  background-color: #eee;
}

#footer p {
  background-color: #303030;
  color: white;
}
<div class="container">
  <div id="body">
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
  </div>
  <div id="footer">
    <p>this is the footer content</p>
  </div>
</div>
...