Как разместить контент внизу страницы, чтобы он был адаптивным? - PullRequest
Новая
       29

Как разместить контент внизу страницы, чтобы он был адаптивным?

0 голосов
/ 22 апреля 2020

У меня проблемы с моим школьным проектом. Я хочу, чтобы моя волна SVG была в основном похожа на нижний колонтитул. Проблема в том, что я не могу получить его там по какой-то причине. Это не отзывчиво. Я пробовал другие решения, которые работали для других, но они не работают для меня. Да, и это не должно быть исправлено, просто внизу страницы. Как я могу заставить это работать? Было бы очень полезно, если бы я нашел решение для этого. Спасибо! 

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&display=swap');

* {
    font-family: 'Baloo 2', cursive;
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #2F2F2F;
    min-height: 100%;
    height: 1000px;
}

.add-question-button-container {
    display: flex;
    justify-content: flex-end;
    padding: 30px;
}

.add-question-button {
    background-color: #B300B3;
    color: white;
    padding: 10px;
    border-radius: 10px;
    border: 4px solid #770087;
    font-size: 20px;
}

.add-question-button:hover {
    background-color: #770087;
    transition: 0.3s;
}

.title-container {
    display: flex;
    justify-content: center;
}

.title {
    color: white;
    font-size: 60px;
    font-weight: bold;
    letter-spacing: 5px;
    padding: 10px;
    margin-top: 0px;
    margin-bottom: 10px;
    border-bottom: #B300B3 solid 4px;
    width: 900px;
    text-align: center;
}

.description-container {
    display: flex;
    justify-content: center;
}

.description {
    color: white;
    font-size: 30px;
    display: flex;
}

.start-button-container {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    padding-right: 200px;
}

.start-button {
    background-color: #B300B3;
    color: white;
    padding: 10px;
    border-radius: 10px;
    border: 4px solid #770087;
    font-size: 30px;       
}

.start-button:hover {
    background-color: #770087;
    transition: 0.3s;
}

.wave-violet {
                                         
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Klaviatuuri kiirklahvid</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="add-question-button-container">
        <button class="add-question-button">Lisa oma küsimused</button>
    </div>
    
    <div class="title-container">
        <div class="title">KLAVIATUURI KIIRKLAHVID</div>
    </div>
    <div class="description-container">
        <div class="description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
    <div class="start-button-container">
        <button class="start-button">ALUSTA</button>
    </div>
        <svg class="wave-violet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#770087" fill-opacity="1" d="M0,32L40,53.3C80,75,160,117,240,128C320,139,400,117,480,106.7C560,96,640,96,720,117.3C800,139,880,181,960,202.7C1040,224,1120,224,1200,234.7C1280,245,1360,267,1400,277.3L1440,288L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
        <path fill="#B300B3" fill-opacity="1" d="M0,96L40,112C80,128,160,160,240,192C320,224,400,256,480,245.3C560,235,640,181,720,181.3C800,181,880,235,960,245.3C1040,256,1120,224,1200,224C1280,224,1360,256,1400,272L1440,288L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path></svg>
</body>
</html>

1 Ответ

1 голос
/ 22 апреля 2020

Посмотрите, нужно ли вам это: 

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&display=swap');

* {
    font-family: 'Baloo 2', cursive;
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #2F2F2F;
    height: 1000px;
}

.add-question-button-container {
    display: flex;
    justify-content: flex-end;
    padding: 30px;
}

.add-question-button {
    background-color: #B300B3;
    color: white;
    padding: 10px;
    border-radius: 10px;
    border: 4px solid #770087;
    font-size: 20px;
}

.add-question-button:hover {
    background-color: #770087;
    transition: 0.3s;
}

.title-container {
    display: flex;
    justify-content: center;
}

.title {
    color: white;
    font-size: 60px;
    font-weight: bold;
    letter-spacing: 5px;
    padding: 10px;
    margin-top: 0px;
    margin-bottom: 10px;
    border-bottom: #B300B3 solid 4px;
    width: 900px;
    text-align: center;
}

.description-container {
    display: flex;
    justify-content: center;
}

.description {
    color: white;
    font-size: 30px;
    display: flex;
}

.start-button-container {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    padding-right: 200px;
}

.start-button {
    background-color: #B300B3;
    color: white;
    padding: 10px;
    border-radius: 10px;
    border: 4px solid #770087;
    font-size: 30px;       
}

.start-button:hover {
    background-color: #770087;
    transition: 0.3s;
}

.wave-violet {
  position: absolute;
  bottom: -1000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Klaviatuuri kiirklahvid</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="add-question-button-container">
        <button class="add-question-button">Lisa oma küsimused</button>
    </div>

    <div class="title-container">
        <div class="title">KLAVIATUURI KIIRKLAHVID</div>
    </div>
    <div class="description-container">
        <div class="description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
    <div class="start-button-container">
        <button class="start-button">ALUSTA</button>
    </div>
        <svg class="wave-violet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#770087" fill-opacity="1" d="M0,32L40,53.3C80,75,160,117,240,128C320,139,400,117,480,106.7C560,96,640,96,720,117.3C800,139,880,181,960,202.7C1040,224,1120,224,1200,234.7C1280,245,1360,267,1400,277.3L1440,288L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
        <path fill="#B300B3" fill-opacity="1" d="M0,96L40,112C80,128,160,160,240,192C320,224,400,256,480,245.3C560,235,640,181,720,181.3C800,181,880,235,960,245.3C1040,256,1120,224,1200,224C1280,224,1360,256,1400,272L1440,288L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path></svg>
</body>
</html>

В этом случае, когда содержимое не заключено в основной div (не просто <body>), вы можете определить положение объекта с помощью та же самая высота тела в отрицательных пикселях, так что это то, что я сделал для класса .wave-violet: 

.wave-violet {
  position: absolute;
  bottom: -1000px;
}

position установлен в абсолютное значение, поэтому он всегда будет оставаться в нижней части страница

bottom - это перевернутая высота тела.

Надеюсь, это помогло!

...