文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将内容放在页面的底部，使其具有响应性？

问如何将内容放在页面的底部，使其具有响应性？
EN

Stack Overflow用户

提问于 2020-04-22 20:27:04

回答 1查看 25关注 0票数 0

我的学校项目出了点问题。我希望我的svg wave基本上就像一个页脚。问题是，由于某种原因，我不能把它带到那里。它没有反应。我尝试了其他对别人有效的解决方案，但它们对我不起作用。哦，它不应该被修复，只是在页面的底部。我怎么才能让它工作呢？如果我能找到一个解决方案，那将会非常有帮助。谢谢!

@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

Stack Overflow用户

回答已采纳

发布于 2020-04-22 20:45:38

看看这是不是你需要的：

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

希望它能帮上忙！

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61374541

复制

相似问题

问如何将内容放在页面的底部，使其具有响应性？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将内容放在页面的底部，使其具有响应性？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将内容放在页面的底部，使其具有响应性？
EN