Здравствуйте кто знает почему слайдер забирает всю ширину и длину страницы хотя он находится внутри контейнера грид,и вся сетка получаетсяпод ним?

Question

[shoshin83]

.header {
  grid-area: hd;
}

.untitled {
  position: fixed;
  height: 100%;
  width: 100%;
  animation: rotateHue infinite 20s linear;
  animation-delay: 0.625s; }
@keyframes rotateHue {
  0% {
    filter: hue-rotate(0deg); }
  20% {
    filter: hue-rotate(0deg); }
  25% {
    filter: hue-rotate(90deg); }
  45% {
    filter: hue-rotate(90deg); }
  50% {
    filter: hue-rotate(180deg); }
  70% {
    filter: hue-rotate(180deg); }
  75% {
    filter: hue-rotate(270deg); }
  95% {
    filter: hue-rotate(270deg); }
  100% {
    filter: hue-rotate(360deg); } }
  .untitled__shutters {
    position: fixed;
    height: 150vmax;
    width: 150vmax;
    left: calc(50% - 75vmax);
    top: calc(50% - 75vmax);
    pointer-events: none;
    z-index: 2;
    animation: rotateFrame 10s linear infinite; }
@keyframes rotateFrame {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(180deg); } }
    .untitled__shutters:before, .untitled__shutters:after {
      content: '';
      position: fixed;
      height: 100%;
      width: 100%;
      left: 50%;
      transform: translate3d(-50%, 0, 0);
      background-color: #b3401a;
      pointer-events: auto; }
    .untitled__shutters:before {
      bottom: 50%;
      animation: openTop 5s infinite; }
@keyframes openTop {
  0% {
    transform: translate3d(-50%, 0, 0);
    animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1); }
  40% {
    transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335); }
  70% {
    transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335); }
  100% {
    transform: translate3d(-50%, 0, 0);
    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); } }
    .untitled__shutters:after {
      top: 50%;
      animation: openBottom 5s infinite; }
@keyframes openBottom {
  0% {
    transform: translate3d(-50%, 0, 0);
    animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1); }
  40% {
    transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335); }
  70% {
    transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335); }
  100% {
    transform: translate3d(-50%, 0, 0);
    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); } }
  .untitled__slides {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #b3401a; }
  .untitled__slide {
    position: fixed;
    height: 100%;
    width: 100%;
    opacity: 0;
    animation: showHideSlide infinite 20s steps(1); }
@keyframes showHideSlide {
  0% {
    opacity: 1;
    pointer-events: auto;
    z-index: 1; }
  25% {
    opacity: 0;
    pointer-events: none;
    z-index: -1; }
  100% {
    opacity: 0;
    pointer-events: none;
    z-index: -1; } }
    .untitled__slide:nth-child(1) {
      animation-delay: 0s; }
      .untitled__slide:nth-child(1) .untitled__slideBg {
        background-image: url(https://unsplash.it/g/1500/2200?image=838); }
    .untitled__slide:nth-child(2) {
      animation-delay: 5s; }
      .untitled__slide:nth-child(2) .untitled__slideBg {
        background-image: url(https://unsplash.it/g/1500/1000?image=1078); }
    .untitled__slide:nth-child(3) {
      animation-delay: 10s; }
      .untitled__slide:nth-child(3) .untitled__slideBg {
        background-image: url(https://unsplash.it/g/1500/1000?image=1077); }
    .untitled__slide:nth-child(4) {
      animation-delay: 15s; }
      .untitled__slide:nth-child(4) .untitled__slideBg {
        background-image: url(https://unsplash.it/g/1500/1200?image=345); }
  .untitled__slideBg {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-color: #b3401a;
    background-blend-mode: hard-light;
    opacity: 1;
    z-index: -1;
    animation: bgInOut 5s infinite; }
@keyframes bgInOut {
  0% {
    transform: rotate(-45deg) scale(1.1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
  33% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(0deg); }
  66% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); }
  100% {
    transform: rotate(45deg) scale(0.9); } }
  .untitled__slideContent {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    color: white;
    font-family: "Abril Fatface", sans-serif;
    line-height: 0.8;
    letter-spacing: -0.025em;
    z-index: 2;
    opacity: 1;
    text-shadow: 0 0 0.5em rgba(179, 64, 26, 0.25);
    mix-blend-mode: lighten; }
    .untitled__slideContent span {
      display: block;
      font-size: 15vmin; }

.button {
  font-family: 'Roboto Mono', sans-serif;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 2vmin;
  display: inline-block;
  position: relative;
  border: 3px solid white;
  box-shadow: -0.5vmin 0.5vmin 0 rgba(255, 255, 255, 0.5);
  background: transparent;
  margin-top: 5vmin;
  mix-blend-mode: lighten;
  color: white;
  padding: 2vmin 2vmin 1.8vmin 2vmin;
  letter-spacing: 0.1em;
  text-shadow: none;
  line-height: 1;
  transform: translate3d(0.5vmin, -0.5vmin, 0);
  transition: all 100ms linear; }
  .button:hover {
    transform: translate3d(1vmin, -1vmin, 0);
    box-shadow: -1vmin 1vmin 0 rgba(255, 255, 255, 0.5);
    background: white;
    color: black; }
  .button:active {
    transform: translate3d(0px, 0px, 0);
    box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.5); }

/*# sourceMappingURL=Slider.module.css.map */

.wrapper {
    display: grid;
    position: relative;
    grid-gap: 10px;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas:
            "hd hd hd hd "
            " sd main main main "
            "ft ft ft ft ";
}

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}

Comments

[Kovalsky]

Лучше сделать интерактивный пример в котором сразу будет видно проблему.

[Ilya Muromtsev]

здесь люди-мониторы, они читаю всё, каждую строчку кода хД

[shoshin83]

[shoshin83]

[Николай Чуприк]

Убирайте position:fixed.

[shoshin83]

position полностью убирать?

Answer 1

[Николай Чуприк]

У вас нет HTML-кода, чтобы понять разметку. Хрустальный шар подсказывает мне, что слайдер у вас живёт в .untitled. Но у вас для .untitled указано position: fixed и при этом у него нет grid-area. Вот поэтому и не работает.

(Как-то не хорошо вываливать нам несколько экранов CSS, не относящихся к вопросу. Уважайте людей, который вынуждены в этом всём разбираться).

Answer 2

[shoshin83]

<header className={style.header}>
            <div className={style.untitled}>
                <div className={style.untitled__slides}>
                    <div className={style.untitled__slide}>
                        <div className={style.untitled__slideBg}> </div>
                        <div className={style.untitled__slideContent}>
                            <span>London</span>
                            <span>Scout</span>
                            <a className={style.button} href="https://unsplash.com/@scoutthecity" target="/black">Unsplash
                                Profile</a>
                        </div>
                    </div>
                    <div className={style.untitled__slide}>
                        <div className={style.untitled__slideBg}> </div>
                        <div className="untitled__slideContent">

                            <span>Vladimir</span>
                            <span>Kudinov</span>
                            <a className={style.button} href="https://unsplash.com/@madbyte" target="/black">Unsplash
                                Profile</a>
                        </div>
                    </div>
                    <div className={style.untitled__slide}>
                        <div className={style.untitled__slideBg}> </div>
                        <div className={style.untitled__slideContent}>
                            <span>Macio</span>
                            <span>Amorim</span>
                            <a className={style.button} href="https://unsplash.com/@maicoamorim" target="/black">Unsplash
                                Profile</a>
                        </div>
                    </div>
                    <div className={style.untitled__slide}>
                        <div className={style.untitled__slideBg}> </div>
                        <div className={style.untitled__slideContent}>
                            <span>Mario</span>
                            <span>Calvo</span>
                            <a className={style.button} href="https://unsplash.com/@mariocalvo" target="/black">Unsplash
                                Profile</a>
                        </div>
                    </div>
                </div>
                <div className={style.untitled__shutters}> </div>
            </div>
</header>

    )
};
export default Slider

Comments

[shoshin83]

cпасибо вроде поогло))