如何将内容放在页面底部以使其响应？
How to place content on the bottom of the page so its responsive?
我的学校项目有问题。我希望我的 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>
看看这是不是你需要的:
@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 class 上所做的：
.wave-violet {
position: absolute;
bottom: -1000px;
}
position 设置为绝对，因此它将始终保留在页面底部
bottom为正反身高
希望对您有所帮助！
我的学校项目有问题。我希望我的 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>
看看这是不是你需要的:
@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 class 上所做的：
.wave-violet {
position: absolute;
bottom: -1000px;
}
position 设置为绝对，因此它将始终保留在页面底部
bottom为正反身高
希望对您有所帮助！