Блог

Главная - Вопросы по программированию - Как растянуть нижний колонтитул пути клипа на всю ширину?

Как растянуть нижний колонтитул пути клипа на всю ширину?

#html #css #reactjs

#HTML #css #reactjs

Вопрос:

На моем веб-сайте есть нижний колонтитул, который должен заполнять всю ширину каждой страницы, но вот что я получаю:

введите описание изображения здесь

Он не заполняет всю ширину страницы и, более того, не прилипает к нижней части. Вот код, который я использую для этого:

 .root {
    margin: 25% 0 0 0;
    width: 100%;
    height: 336px;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0 11%, 4% 44%, 24% 15%, 38% 29%, 66% 7%, 80% 27%, 100% 0, 100% 100%, 0% 99%);
    background: var(--text-marked);
}

.firstLine,
.secondLine {
    margin-top: 5%;
    position: absolute;
    font-family: Montserrat medium, sans-serif;
    font-size: 32px;
    color: #ffffff;
}

.secondLine {
   margin-top: 12%;
   font-size: 20px;
}

Вот код контейнера div:

 .container {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Montserrat, sans-serif;
    color: var(--text);
}

Вот код нижнего колонтитула:

 import React from 'react'
import styles from './Footer.module.css'

const Footer = () => {
    return (
        <div className={styles.root}>
            <p className={styles.firstLine}>Designed by Mikhail Shkarubski</p>
            <p className={styles.secondLine}>For HSE Global Scholarship Competition</p>
        </div>
    )
}

export default Footer

Существуют ли какие-либо решения без calc() или с отрицательными полями?

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

1. вставьте html, пожалуйста

2. @sergeykuznetsov Я прикрепил код моего нижнего колонтитула

3. вы сбросили поля для <p> или добавили отступ 1px для родительского элемента? (сворачивающееся поле)?

4. Похоже, у вас есть либо отступ, либо поле для родительского контейнера или корневого элемента (убедитесь, что поле body равно 0, по умолчанию браузер использует поле 8 пикселей для body). Чтобы закрепить его внизу, используйте свойство absolute или fixed position, если вы устанавливаете для него значение absolute, убедитесь, что вы также установили для его родительского элемента значение relative, иначе оно будет действовать как фиксированное.

5. На данный момент нет другого способа, кроме как создавать контейнеры полной ширины без использования calc или отрицательных полей, вот ссылка для справки: css-tricks.com/full-width-containers-limited-width-parents