如何将内容放置在页面底部以使其具有响应性？

问题描述 投票：0回答：1

我的学校项目遇到问题。我希望我的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>
html css svg footer
1个回答
0
投票

看看是否正是您所需要的：

@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是身体的反高度。

希望它有所帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.