Как вытолкнуть форму CSS внизу экрана? - PullRequest
Новая
       24

Как вытолкнуть форму CSS внизу экрана?

1 голос
/ 27 марта 2019

Я пытаюсь повторить этот макет.

Mockup

И я успешно вытолкнул верхнюю круглую форму из экрана, как на картинке. Но нижняя просто удлиняет веб-страницу, не выходя за пределы экрана. Как вытолкнуть его из экрана, как на картинке? 

#circleTop {
    width: 55rem;
    height: 55rem;
    background-image: linear-gradient(120deg, red, yellow);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    left: 60%;
    top: -35rem;
}

#circleBottom {
    width: 50rem;
    height: 50rem;
    background-image: linear-gradient(120deg, green, blue);
    border-radius: 50%;
    position: relative;
    z-index: -1;
    right: 45%;
    bottom: -35rem;
}

<div class="header">
            <div id="circleTop"></div>
            <div class="headerBox">
                <h1>Headline</h1>
                <h2>Subheading</h2>
            </div>
        </div>
 ....

<div class="footer">
           <div id="circleBottom"></div>
            <div class="section">
                <a href="#">Link</a>
                <a href="#">Link</a>
            </div>
            <div class="otherLinks">
                <p>Lorem Ipsum Dolor Sit Amet</p>
            </div>
        </div>

Ответы [ 3 ]

3 голосов
/ 27 марта 2019

Ответы пока не являются неправильными, но IMO они неполны. Если вы хотите, чтобы ваш круг был «обрезан» и не стал видимым при прокрутке вниз, он должен содержаться в другом элементе, который ограничит его видимость. position:absolute; является частью решения, но оно будет позиционировать ваш элемент относительно ближайшего содержащего элемента, для которого определена позиция - так что вашему div нижнего колонтитула, вероятно, потребуется добавить position:relative;. Затем вам нужно убедиться, что часть круга, из которой предполагается вырезать, не видна, даже если она выходит за нижний колонтитул, поэтому добавление overflow:hidden завершит работу. Это должно привести вас в правильном направлении: 

.footer {
  position:relative;
  overflow:hidden;
}

вы можете или не хотите, чтобы это применялось к div нижнего колонтитула, но принцип тот же ... переполненные элементы будут видны и будут вызывать прокрутку, если вы не скажете им не делать этого, поэтому переполнение страницы на самом деле иллюзия, созданная наличием другого элемента «обрезать» или скрыть ту часть, которая была бы переполнена. Как предлагали некоторые другие ответы, вы могли бы сделать это, стилизовав элементы body или html, но поведение обычно более предсказуемо, если вы используете элемент ближе к тому, который хотите обрезать. Например, установка фиксированной высоты или «overflow: hidden;» на теле будет препятствовать прокрутке вашей страницы, если вы добавите контент, который выше, чем на экране.

1 голос
/ 27 марта 2019

Вы добавляете элемент body и css, как показано ниже: 

body{
  position: relative;
  height: 100vh;
  overflow: hidden;
}
#circleTop {
    width: 55rem;
    height: 55rem;
    background-image: linear-gradient(120deg, red, yellow);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    right: -25rem;
    top: -25rem;
}

#circleBottom {
    position: absolute;
    width: 55rem;
    height: 55rem;
    background-image: linear-gradient(120deg, green, blue);
    border-radius: 50%; 
    z-index: -1;
    left: -25rem;
    bottom: -25rem;
}
<body>
  <div class="header">
    <div id="circleTop"></div>
    <div class="headerBox">
      <h1>Headline</h1>
      <h2>Subheading</h2>
    </div>
  </div>

  <div class="footer">
    <div id="circleBottom"></div>
    <div class="section">
      <a href="#">Link</a>
      <a href="#">Link</a>
    </div>
    <div class="otherLinks">
      <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>
  </div>
</body>
0 голосов
/ 27 марта 2019

Попробуйте использовать следующий класс для нижнего левого круга 

#circleBottom {
    width: 50rem;
    height: 50rem;
    background-image: linear-gradient(120deg, green, blue);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    left: -15%;
    bottom: -15%;
}

Пример круга

...