Блог

Главная - Вопросы по программированию - Форма, выполненная с помощью CSS, постоянно переполняет родительский контейнер

Форма, выполненная с помощью CSS, постоянно переполняет родительский контейнер

#html #css

Вопрос:

Я делаю небольшую страницу, и мне нужно, чтобы на заднем плане было 2 фигуры (скриншот дизайна прилагается). Я сделал их исключительно с помощью CSS. Я пробовал как ::до/::после для родительского контейнера, так и просто отдельные DIV-ы в HTML. Проблема в том, что в обоих случаях нижняя правая фигура всегда выходит из контейнера, и появляется свиток. Я думал, что переполнение поможет, но оно не помогло мне. Кто-нибудь может помочь мне это исправить? Спасибо!

 body {
  position: relative;
  min-height: 100vh;
  width: 100%;
  padding: 10%;
}

.container {
  width: 100%;
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
}

.background-one {
  position: absolute;
  top: 0;
  left: -50%;
  background: linear-gradient(to top, $violet, $magenta);
  width: 375px;
  height: 54%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  z-index: -1;
}

.background-two {
  position: absolute;
  bottom: 0;
  right: -50%;
  background: hsl(236, 72%, 63%);
  width: 375px;
  height: 54%;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  z-index: -1;
} 
 <body>
  <div class="background-one"></div>
  <div class="background-two"></div>

  <div class="container">
    <div class="phone"></div>
  </div>
</body>

Чего я пытаюсь достичь, ничего не переполняя

Что происходит

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

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

2. Я не использовал никаких изображений. Я только что построил фигуры, создав div(или ::после элемента) и придав ему ширину, высоту и цвет фона. Я пробовал добавлять высоту, но это не имеет значения. Проблема возникает только тогда, когда я пытаюсь абсолютно расположить эти элементы в соответствии с абсолютно расположенным родителем. И это происходило только с правой стороны. Более того, я также по какой-то причине начинаю заполнять пробелы внизу, хотя там ничего нет.

3. А, понятно. jsfiddle.net/FirePrism/1fjp92rv Это чертовски близко к тому, что вы хотите, но проблема в том, что это не плавный дизайн. Он использует заданные значения для объектов (хотя, возможно, вы могли бы просто поменять их местами с пропорциональными значениями). В принципе, это будет работать только с небольшим окном просмотра.

4. Что ж, теперь я наконец нашел способ это исправить. Пока работает нормально. Я написал ответ ниже.

Ответ №1:

Ладно, наконец-то я думаю, что нашел решение, на случай, если кто-нибудь столкнется с той же проблемой. Я вложил эти DIV(которые являются фоновыми фигурами) в другой DIV. Я сделал так, чтобы этот раздел контейнера покрывал весь экран, а затем расположил эти разделители формы абсолютно в новом контейнере, установив переполнение контейнера в скрытое положение.

 .newContainer {
  position: absolute;  //Its container is set to relative.
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.backgroundShape {
  position: absolute;
  bottom: 0;
  right: -50%;
  //other properties with width, height etc.
}
Метки: , ,