Блог

Главная - Вопросы по программированию - Дочерний элемент контейнера начальной загрузки с фоном полной ширины

Дочерний элемент контейнера начальной загрузки с фоном полной ширины

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Как я могу сделать, чтобы градиентный фон #section2 был полной ширины (чтобы заполнить окно просмотра по ширине)?
Я использую bootstrap и хотел бы соблюдать эти ограничения:

  • нет javascript
  • не удаление класса контейнера из <main>
  • не добавляется горизонтальная прокрутка (фон не должен быть шире окна просмотра, даже если появляется вертикальная полоса прокрутки)

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

 body * {
  border: 1px solid black;
}

section {
  height: 100px;
}

#section2 {
  color: white;
  background: linear-gradient(180deg, blue 0%, white 100%);
} 
 <html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <header>header</header>
  <main class="container">
    <section>section 1</section>
    <section id="section2">section 2</section>
    <section>section 3</section>
  </main>
  <footer>footer</footer>
</body>

</html>

Ответ №1:

Используйте Puedo Elements для этого:

 #section2:before {
  content: "";
  position: absolute;
  height: 100px;
  width: 100%;
  left: 0;
  background: linear-gradient(180deg, red 0%, yellow 100%);
}

Codepen: https://codepen.io/manaskhandelwal1/pen/OJRoaXZ

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

1. Спасибо за этот ответ, его удобно использовать: прежде чем создавать абсолютно позиционированный элемент! Однако width: 100vw не работает при появлении вертикальной полосы прокрутки. Для проверки вы можете установить высоту раздела в 1000 пикселей в вашем codepen: когда появляется вертикальная полоса прокрутки, 100vw становится шире, чем оставшийся видовой экран, что создает горизонтальную полосу прокрутки.

2. Я обновил код. Изменил ширину на width: 100%; , теперь она работает отлично.

3. Да, это работает! Я удивлен: при использовании width: 100% разве ширина элемента section2:before не должна совпадать с шириной его контейнера (section2, который уже, чем окно просмотра) ?!

4. #section2:before есть position: absolute; , а контейнера нет position: relative; .

5. Если бы контейнер был position: relative; , то : before он занял бы длину контейнера. Здесь мы не указали относительную позицию, поэтому перед тем, как выровнять ее по отношению к телу, которое по умолчанию является позицией относительно.