如何让这个页脚与文本区域对齐？ Flexbox 似乎没有这样做
How do I get this footer to line up with the textarea? Flexbox doesn't seem to do it
我希望底部的文本居中并与文本框对齐。如果我添加边距，它只适用于我当前的屏幕尺寸，但是当我将页面拖到另一个尺寸的显示器时，间距会变得混乱。如何将此页面的底部与文本区域居中？这是我的代码：
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
}
#flex-container {
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Heebo', sans-serif;
}
.contact-section {
text-align: center;
width: 100%;
height: 77vh;
background: linear-gradient( rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(img/colo.png);
/* background-size: center; */
background-position: center;
color: white;
margin-top: 2.5rem;
padding: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contact-section__text {
font-weight: 700;
font-size: x-large;
}
label {
display: none;
}
.contact input,
.contact textarea {
margin: .5rem;
font-weight: 1000;
}
.contact textarea {
margin-right: 1.25rem;
}
.contact-section__btn {
padding: 12px 26px;
border-radius: 7px;
background: rgb(201, 83, 5);
border: none;
color: white;
font-size: 1.05rem;
}
.contact-section__btn:hover,
.contact-section__btn:focus {
background-color: white;
color: rgb(201, 83, 5);
cursor: pointer;
}
input[type="text"], [type="email"], textarea {
background-color: rgb(247, 204, 175);
border-color: rgb(201, 83, 5);
width: 400px;
height: 35px;
margin-right: 1.45rem;
}
.contact__txtarea label,
.textarea {
width: 400px;
height: 200px;
vertical-align: top;
}
.email-form {
margin-right: .80rem;
}
.addresses {
/* background-color: rgb(99, 99, 99); */
background-color:rgb(201, 83, 5);
color: white;
/* margin-top: 2rem; */
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
/* padding-inline-start: 0; */
justify-content: space-evenly;
}
.addresses__info1 {
flex-direction: column;
}
.addresses__info2 {
flex-direction: column;
}
.main_footer {
/* background-color:rgb(99, 99, 99); */
background-color:rgb(201, 83, 5);
margin-top: 3.5rem;
flex-direction: column;
}
.footer_links { /*li*/
margin: 0;
}
.footer_lists { /*ul*/
list-style: none;
margin: 0;
text-align: center;
padding-inline-start: 0;
}
.footer_links a { /*li a*/
color:white;
text-decoration: none;
font-size: 1.1rem;
}
.footer_links :hover {
text-decoration-line: underline;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact | Feel free to email or call Us!</title>
<link rel="stylesheet" type="text/css" href="contact.css">
<link rel="stylesheet" type="text/css" href="contact_nav_ft.css">
<link href="img/colo.icon .png" rel="shortcut icon" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul class="nav_list">
<li ></li>
<li class="nav_lists" style="float:right;"><a href="Colombia.html">Our Purpose</a></li>
<li class="nav_lists"><a href="Colombian-cities.html">Cities</a></li>
<li class="nav_lists"><a href="contact.html">Contact</a></li>
<li class="nav_lists"><a href="services.html">Our Services</a></li>
</ul>
</nav>
<main id="flex-container">
<section class="contact-section">
<div class="contact-section__text">
<p>
Shoot us an email or Give us a call!<br>
We are always happy to answer any questions you may have!<br>
</p>
</div>
<form action="" method="POST" class="contact">
<div>
<label for="name">Your Name</label>
<input id="name" type="text" placeholder="Your name" required>
</div>
<div class="email-form">
<label for="email">Your Email</label>
<input id="email" type="email" placeholder="Your email" required>
</div>
<div class="contact__txtarea">
<label for="text">Message</label>
<textarea class="textarea" id="text" maxlength="500" placeholder="Your message here..." required></textarea>
</div>
<div>
<input class="contact-section__btn" type="submit" value="Send Message" required>
</div>
</form>
</section>
<section class="addresses">
<div class="addresses__info1">
<p>Finds us on:</p>
<img src="img/you.svg" alt="Youtube">
<img src="img/insta.svg" alt="Instagram">
<img src="img/face.svg" alt="Facebook">
<p>Email us at: <a href="mailto:questions@countryofcol.com">questions@countryofcol.com</a><br>
Call us at: <a href="tel:+57 118-647-0023">+57 118-647-0023</a><br></p>
</div>
<div class="addresses__info2">
<p>Calle Maria 63 Oficina 702<br>
Medellin 4665684<br>
Colombia<br></p>
<p>Tuesday-Saturday<br>
9AM - 6PM COT<br></p>
</div>
<footer class="main_footer">
<ul class="footer_lists">
<li class="footer_links"><a href="terms.html">Terms</a></li>
<li class="footer_links"><a href="privacy.html">Privacy Policy</a></li>
</ul>
</footer>
</section>
<!--</section>-->
</main>
</body>
</html>
试试这个：
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
}
#flex-container {
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Heebo', sans-serif;
}
.contact-section {
text-align: center;
width: 100%;
height: 77vh;
background: linear-gradient( rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url(img/colo.png);
/* background-size: center; */
background-position: center;
color: white;
margin-top: 2.5rem;
padding: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contact-section__text {
font-weight: 700;
font-size: x-large;
}
label {
display: none;
}
.contact input,
.contact textarea {
margin: .5rem;
font-weight: 1000;
}
.contact textarea {
margin-right: 1.25rem;
}
.contact-section__btn {
padding: 12px 26px;
border-radius: 7px;
background: rgb(201, 83, 5);
border: none;
color: white;
font-size: 1.05rem;
}
.contact-section__btn:hover,
.contact-section__btn:focus {
background-color: white;
color: rgb(201, 83, 5);
cursor: pointer;
}
input[type="text"],
[type="email"],
textarea {
background-color: rgb(247, 204, 175);
border-color: rgb(201, 83, 5);
width: 400px;
height: 35px;
margin-right: 1.45rem;
}
.contact__txtarea label,
.textarea {
width: 400px;
height: 200px;
vertical-align: top;
}
.email-form {
margin-right: .80rem;
}
.addresses {
/* background-color: rgb(99, 99, 99); */
background-color: rgb(201, 83, 5);
color: white;
/* margin-top: 2rem; */
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
/* padding-inline-start: 0; */
}
.addresses__info1 {
flex-direction: column;
width: 1rem;
flex-grow: 1;
}
.addresses__info2 {
flex-direction: column;
width: 1rem;
flex-grow: 1;
}
.main_footer {
/* background-color:rgb(99, 99, 99); */
background-color: rgb(201, 83, 5);
margin-top: 3.5rem;
flex-direction: column;
width: 1rem;
flex-grow: 1;
}
.footer_links {
/*li*/
margin: 0;
}
.footer_lists {
/*ul*/
list-style: none;
margin: 0;
text-align: center;
padding-inline-start: 0;
}
.footer_links a {
/*li a*/
color: white;
text-decoration: none;
font-size: 1.1rem;
}
.footer_links :hover {
text-decoration-line: underline;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact | Feel free to email or call Us!</title>
<link rel="stylesheet" type="text/css" href="contact.css">
<link rel="stylesheet" type="text/css" href="contact_nav_ft.css">
<link href="img/colo.icon .png" rel="shortcut icon" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul class="nav_list">
<li></li>
<li class="nav_lists" style="float:right;"><a href="Colombia.html">Our Purpose</a></li>
<li class="nav_lists"><a href="Colombian-cities.html">Cities</a></li>
<li class="nav_lists"><a href="contact.html">Contact</a></li>
<li class="nav_lists"><a href="services.html">Our Services</a></li>
</ul>
</nav>
<main id="flex-container">
<section class="contact-section">
<div class="contact-section__text">
<p>
Shoot us an email or Give us a call!<br> We are always happy to answer any questions you may have!<br>
</p>
</div>
<form action="" method="POST" class="contact">
<div>
<label for="name">Your Name</label>
<input id="name" type="text" placeholder="Your name" required>
</div>
<div class="email-form">
<label for="email">Your Email</label>
<input id="email" type="email" placeholder="Your email" required>
</div>
<div class="contact__txtarea">
<label for="text">Message</label>
<textarea class="textarea" id="text" maxlength="500" placeholder="Your message here..." required></textarea>
</div>
<div>
<input class="contact-section__btn" type="submit" value="Send Message" required>
</div>
</form>
</section>
<section class="addresses">
<div class="addresses__info1">
<p>Finds us on:</p>
<img src="img/you.svg" alt="Youtube">
<img src="img/insta.svg" alt="Instagram">
<img src="img/face.svg" alt="Facebook">
<p>Email us at: <a href="mailto:questions@countryofcol.com">questions@countryofcol.com</a><br> Call us at: <a href="tel:+57 118-647-0023">+57 118-647-0023</a><br></p>
</div>
<div class="addresses__info2">
<p>Calle Maria 63 Oficina 702<br> Medellin 4665684<br> Colombia
<br></p>
<p>Tuesday-Saturday<br> 9AM - 6PM COT<br></p>
</div>
<footer class="main_footer">
<ul class="footer_lists">
<li class="footer_links"><a href="terms.html">Terms</a></li>
<li class="footer_links"><a href="privacy.html">Privacy Policy</a></li>
</ul>
</footer>
</section>
<!--</section>-->
</main>
</body>
</html>
所以首先你在做一个 html 结构错误。您正在尝试将 footer 设置为 main，但它应该不存在。
Body 结构应该是这样的：
<body>
<header></header>
<main></main>
<footer></footer>
</body>
那么你在 contact-section 中设置 height: 77vh; 尝试设置 min-heigth: 77vh; 以使其更灵活。
如果您想删除页脚上的白色条带，只需删除 footer 中的 margin-top。但是，如果您所有的橙色部分都是页脚，那么您应该将其全部设置在页脚中，而不是将其分隔在 section 和 footer
中
演示
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
}
#flex-container {
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Heebo', sans-serif;
}
.contact-section {
text-align: center;
width: 100%;
min-height: 77vh; /* Replaced from height to min-height */
background: linear-gradient( rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(img/colo.png);
/* background-size: center; */
background-position: center;
color: white;
margin-top: 2.5rem;
padding: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contact-section__text {
font-weight: 700;
font-size: x-large;
}
label {
display: none;
}
.contact input,
.contact textarea {
margin: .5rem;
font-weight: 1000;
}
.contact textarea {
margin-right: 1.25rem;
}
.contact-section__btn {
padding: 12px 26px;
border-radius: 7px;
background: rgb(201, 83, 5);
border: none;
color: white;
font-size: 1.05rem;
}
.contact-section__btn:hover,
.contact-section__btn:focus {
background-color: white;
color: rgb(201, 83, 5);
cursor: pointer;
}
input[type="text"], [type="email"], textarea {
background-color: rgb(247, 204, 175);
border-color: rgb(201, 83, 5);
width: 400px;
height: 35px;
margin-right: 1.45rem;
}
.contact__txtarea label,
.textarea {
width: 400px;
height: 200px;
vertical-align: top;
}
.email-form {
margin-right: .80rem;
}
.addresses {
/* background-color: rgb(99, 99, 99); */
background-color:rgb(201, 83, 5);
color: white;
/* margin-top: 2rem; */
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
/* padding-inline-start: 0; */
justify-content: space-evenly;
}
.addresses__info1 {
flex-direction: column;
}
.addresses__info2 {
flex-direction: column;
}
.main_footer {
/* background-color:rgb(99, 99, 99); */
background-color:rgb(201, 83, 5);
/*margin-top: 3.5rem;*/
flex-direction: column;
}
.footer_links { /*li*/
margin: 0;
}
.footer_lists { /*ul*/
list-style: none;
margin: 0;
text-align: center;
padding-inline-start: 0;
}
.footer_links a { /*li a*/
color:white;
text-decoration: none;
font-size: 1.1rem;
}
.footer_links :hover {
text-decoration-line: underline;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact | Feel free to email or call Us!</title>
<link rel="stylesheet" type="text/css" href="contact.css">
<link rel="stylesheet" type="text/css" href="contact_nav_ft.css">
<link href="img/colo.icon .png" rel="shortcut icon" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul class="nav_list">
<li ></li>
<li class="nav_lists" style="float:right;"><a href="Colombia.html">Our Purpose</a></li>
<li class="nav_lists"><a href="Colombian-cities.html">Cities</a></li>
<li class="nav_lists"><a href="contact.html">Contact</a></li>
<li class="nav_lists"><a href="services.html">Our Services</a></li>
</ul>
</nav>
<main id="flex-container">
<section class="contact-section">
<div class="contact-section__text">
<p>
Shoot us an email or Give us a call!<br>
We are always happy to answer any questions you may have!<br>
</p>
</div>
<form action="" method="POST" class="contact">
<div>
<label for="name">Your Name</label>
<input id="name" type="text" placeholder="Your name" required>
</div>
<div class="email-form">
<label for="email">Your Email</label>
<input id="email" type="email" placeholder="Your email" required>
</div>
<div class="contact__txtarea">
<label for="text">Message</label>
<textarea class="textarea" id="text" maxlength="500" placeholder="Your message here..." required></textarea>
</div>
<div>
<input class="contact-section__btn" type="submit" value="Send Message" required>
</div>
</form>
</section>
<section class="addresses">
<div class="addresses__info1">
<p>Finds us on:</p>
<img src="img/you.svg" alt="Youtube">
<img src="img/insta.svg" alt="Instagram">
<img src="img/face.svg" alt="Facebook">
<p>Email us at: <a href="mailto:questions@countryofcol.com">questions@countryofcol.com</a><br>
Call us at: <a href="tel:+57 118-647-0023">+57 118-647-0023</a><br></p>
</div>
<div class="addresses__info2">
<p>Calle Maria 63 Oficina 702<br>
Medellin 4665684<br>
Colombia<br></p>
<p>Tuesday-Saturday<br>
9AM - 6PM COT<br></p>
</div>
</section>
<!--</section>-->
</main>
<footer class="main_footer">
<ul class="footer_lists">
<li class="footer_links"><a href="terms.html">Terms</a></li>
<li class="footer_links"><a href="privacy.html">Privacy Policy</a></li>
</ul>
</footer>
</body>
</html>
带 1 个页脚的演示
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
}
#flex-container {
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Heebo', sans-serif;
}
.contact-section {
text-align: center;
width: 100%;
min-height: 77vh; /* Replaced from height to min-height */
background: linear-gradient( rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(img/colo.png);
/* background-size: center; */
background-position: center;
color: white;
margin-top: 2.5rem;
padding: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contact-section__text {
font-weight: 700;
font-size: x-large;
}
label {
display: none;
}
.contact input,
.contact textarea {
margin: .5rem;
font-weight: 1000;
}
.contact textarea {
margin-right: 1.25rem;
}
.contact-section__btn {
padding: 12px 26px;
border-radius: 7px;
background: rgb(201, 83, 5);
border: none;
color: white;
font-size: 1.05rem;
}
.contact-section__btn:hover,
.contact-section__btn:focus {
background-color: white;
color: rgb(201, 83, 5);
cursor: pointer;
}
input[type="text"], [type="email"], textarea {
background-color: rgb(247, 204, 175);
border-color: rgb(201, 83, 5);
width: 400px;
height: 35px;
margin-right: 1.45rem;
}
.contact__txtarea label,
.textarea {
width: 400px;
height: 200px;
vertical-align: top;
}
.email-form {
margin-right: .80rem;
}
.addresses {
/* background-color: rgb(99, 99, 99); */
background-color:rgb(201, 83, 5);
color: white;
/* margin-top: 2rem; */
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
/* padding-inline-start: 0; */
justify-content: space-evenly;
}
.addresses__info1 {
flex-direction: column;
}
.addresses__info2 {
flex-direction: column;
}
.main_footer {
/* background-color:rgb(99, 99, 99); */
background-color:rgb(201, 83, 5);
/*margin-top: 3.5rem;*/
flex-direction: column;
}
.footer_links { /*li*/
margin: 0;
}
.footer_lists { /*ul*/
list-style: none;
margin: 0;
text-align: center;
padding-inline-start: 0;
}
.footer_links a { /*li a*/
color:white;
text-decoration: none;
font-size: 1.1rem;
}
.footer_links :hover {
text-decoration-line: underline;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact | Feel free to email or call Us!</title>
<link rel="stylesheet" type="text/css" href="contact.css">
<link rel="stylesheet" type="text/css" href="contact_nav_ft.css">
<link href="img/colo.icon .png" rel="shortcut icon" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul class="nav_list">
<li ></li>
<li class="nav_lists" style="float:right;"><a href="Colombia.html">Our Purpose</a></li>
<li class="nav_lists"><a href="Colombian-cities.html">Cities</a></li>
<li class="nav_lists"><a href="contact.html">Contact</a></li>
<li class="nav_lists"><a href="services.html">Our Services</a></li>
</ul>
</nav>
<main id="flex-container">
<section class="contact-section">
<div class="contact-section__text">
<p>
Shoot us an email or Give us a call!<br>
We are always happy to answer any questions you may have!<br>
</p>
</div>
<form action="" method="POST" class="contact">
<div>
<label for="name">Your Name</label>
<input id="name" type="text" placeholder="Your name" required>
</div>
<div class="email-form">
<label for="email">Your Email</label>
<input id="email" type="email" placeholder="Your email" required>
</div>
<div class="contact__txtarea">
<label for="text">Message</label>
<textarea class="textarea" id="text" maxlength="500" placeholder="Your message here..." required></textarea>
</div>
<div>
<input class="contact-section__btn" type="submit" value="Send Message" required>
</div>
</form>
</section>
<!--</section>-->
</main>
<footer class="main_footer">
<div class="addresses">
<div class="addresses__info1">
<p>Finds us on:</p>
<img src="img/you.svg" alt="Youtube">
<img src="img/insta.svg" alt="Instagram">
<img src="img/face.svg" alt="Facebook">
<p>Email us at: <a href="mailto:questions@countryofcol.com">questions@countryofcol.com</a><br>
Call us at: <a href="tel:+57 118-647-0023">+57 118-647-0023</a><br></p>
</div>
<div class="addresses__info2">
<p>Calle Maria 63 Oficina 702<br>
Medellin 4665684<br>
Colombia<br></p>
<p>Tuesday-Saturday<br>
9AM - 6PM COT<br></p>
</div>
</div>
<ul class="footer_lists">
<li class="footer_links"><a href="terms.html">Terms</a></li>
<li class="footer_links"><a href="privacy.html">Privacy Policy</a></li>
</ul>
</footer>
</body>
</html>
我希望底部的文本居中并与文本框对齐。如果我添加边距，它只适用于我当前的屏幕尺寸，但是当我将页面拖到另一个尺寸的显示器时，间距会变得混乱。如何将此页面的底部与文本区域居中？这是我的代码：
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
}
#flex-container {
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Heebo', sans-serif;
}
.contact-section {
text-align: center;
width: 100%;
height: 77vh;
background: linear-gradient( rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(img/colo.png);
/* background-size: center; */
background-position: center;
color: white;
margin-top: 2.5rem;
padding: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contact-section__text {
font-weight: 700;
font-size: x-large;
}
label {
display: none;
}
.contact input,
.contact textarea {
margin: .5rem;
font-weight: 1000;
}
.contact textarea {
margin-right: 1.25rem;
}
.contact-section__btn {
padding: 12px 26px;
border-radius: 7px;
background: rgb(201, 83, 5);
border: none;
color: white;
font-size: 1.05rem;
}
.contact-section__btn:hover,
.contact-section__btn:focus {
background-color: white;
color: rgb(201, 83, 5);
cursor: pointer;
}
input[type="text"], [type="email"], textarea {
background-color: rgb(247, 204, 175);
border-color: rgb(201, 83, 5);
width: 400px;
height: 35px;
margin-right: 1.45rem;
}
.contact__txtarea label,
.textarea {
width: 400px;
height: 200px;
vertical-align: top;
}
.email-form {
margin-right: .80rem;
}
.addresses {
/* background-color: rgb(99, 99, 99); */
background-color:rgb(201, 83, 5);
color: white;
/* margin-top: 2rem; */
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
/* padding-inline-start: 0; */
justify-content: space-evenly;
}
.addresses__info1 {
flex-direction: column;
}
.addresses__info2 {
flex-direction: column;
}
.main_footer {
/* background-color:rgb(99, 99, 99); */
background-color:rgb(201, 83, 5);
margin-top: 3.5rem;
flex-direction: column;
}
.footer_links { /*li*/
margin: 0;
}
.footer_lists { /*ul*/
list-style: none;
margin: 0;
text-align: center;
padding-inline-start: 0;
}
.footer_links a { /*li a*/
color:white;
text-decoration: none;
font-size: 1.1rem;
}
.footer_links :hover {
text-decoration-line: underline;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact | Feel free to email or call Us!</title>
<link rel="stylesheet" type="text/css" href="contact.css">
<link rel="stylesheet" type="text/css" href="contact_nav_ft.css">
<link href="img/colo.icon .png" rel="shortcut icon" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul class="nav_list">
<li ></li>
<li class="nav_lists" style="float:right;"><a href="Colombia.html">Our Purpose</a></li>
<li class="nav_lists"><a href="Colombian-cities.html">Cities</a></li>
<li class="nav_lists"><a href="contact.html">Contact</a></li>
<li class="nav_lists"><a href="services.html">Our Services</a></li>
</ul>
</nav>
<main id="flex-container">
<section class="contact-section">
<div class="contact-section__text">
<p>
Shoot us an email or Give us a call!<br>
We are always happy to answer any questions you may have!<br>
</p>
</div>
<form action="" method="POST" class="contact">
<div>
<label for="name">Your Name</label>
<input id="name" type="text" placeholder="Your name" required>
</div>
<div class="email-form">
<label for="email">Your Email</label>
<input id="email" type="email" placeholder="Your email" required>
</div>
<div class="contact__txtarea">
<label for="text">Message</label>
<textarea class="textarea" id="text" maxlength="500" placeholder="Your message here..." required></textarea>
</div>
<div>
<input class="contact-section__btn" type="submit" value="Send Message" required>
</div>
</form>
</section>
<section class="addresses">
<div class="addresses__info1">
<p>Finds us on:</p>
<img src="img/you.svg" alt="Youtube">
<img src="img/insta.svg" alt="Instagram">
<img src="img/face.svg" alt="Facebook">
<p>Email us at: <a href="mailto:questions@countryofcol.com">questions@countryofcol.com</a><br>
Call us at: <a href="tel:+57 118-647-0023">+57 118-647-0023</a><br></p>
</div>
<div class="addresses__info2">
<p>Calle Maria 63 Oficina 702<br>
Medellin 4665684<br>
Colombia<br></p>
<p>Tuesday-Saturday<br>
9AM - 6PM COT<br></p>
</div>
<footer class="main_footer">
<ul class="footer_lists">
<li class="footer_links"><a href="terms.html">Terms</a></li>
<li class="footer_links"><a href="privacy.html">Privacy Policy</a></li>
</ul>
</footer>
</section>
<!--</section>-->
</main>
</body>
</html>
试试这个：
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
}
#flex-container {
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Heebo', sans-serif;
}
.contact-section {
text-align: center;
width: 100%;
height: 77vh;
background: linear-gradient( rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url(img/colo.png);
/* background-size: center; */
background-position: center;
color: white;
margin-top: 2.5rem;
padding: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contact-section__text {
font-weight: 700;
font-size: x-large;
}
label {
display: none;
}
.contact input,
.contact textarea {
margin: .5rem;
font-weight: 1000;
}
.contact textarea {
margin-right: 1.25rem;
}
.contact-section__btn {
padding: 12px 26px;
border-radius: 7px;
background: rgb(201, 83, 5);
border: none;
color: white;
font-size: 1.05rem;
}
.contact-section__btn:hover,
.contact-section__btn:focus {
background-color: white;
color: rgb(201, 83, 5);
cursor: pointer;
}
input[type="text"],
[type="email"],
textarea {
background-color: rgb(247, 204, 175);
border-color: rgb(201, 83, 5);
width: 400px;
height: 35px;
margin-right: 1.45rem;
}
.contact__txtarea label,
.textarea {
width: 400px;
height: 200px;
vertical-align: top;
}
.email-form {
margin-right: .80rem;
}
.addresses {
/* background-color: rgb(99, 99, 99); */
background-color: rgb(201, 83, 5);
color: white;
/* margin-top: 2rem; */
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
/* padding-inline-start: 0; */
}
.addresses__info1 {
flex-direction: column;
width: 1rem;
flex-grow: 1;
}
.addresses__info2 {
flex-direction: column;
width: 1rem;
flex-grow: 1;
}
.main_footer {
/* background-color:rgb(99, 99, 99); */
background-color: rgb(201, 83, 5);
margin-top: 3.5rem;
flex-direction: column;
width: 1rem;
flex-grow: 1;
}
.footer_links {
/*li*/
margin: 0;
}
.footer_lists {
/*ul*/
list-style: none;
margin: 0;
text-align: center;
padding-inline-start: 0;
}
.footer_links a {
/*li a*/
color: white;
text-decoration: none;
font-size: 1.1rem;
}
.footer_links :hover {
text-decoration-line: underline;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact | Feel free to email or call Us!</title>
<link rel="stylesheet" type="text/css" href="contact.css">
<link rel="stylesheet" type="text/css" href="contact_nav_ft.css">
<link href="img/colo.icon .png" rel="shortcut icon" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul class="nav_list">
<li></li>
<li class="nav_lists" style="float:right;"><a href="Colombia.html">Our Purpose</a></li>
<li class="nav_lists"><a href="Colombian-cities.html">Cities</a></li>
<li class="nav_lists"><a href="contact.html">Contact</a></li>
<li class="nav_lists"><a href="services.html">Our Services</a></li>
</ul>
</nav>
<main id="flex-container">
<section class="contact-section">
<div class="contact-section__text">
<p>
Shoot us an email or Give us a call!<br> We are always happy to answer any questions you may have!<br>
</p>
</div>
<form action="" method="POST" class="contact">
<div>
<label for="name">Your Name</label>
<input id="name" type="text" placeholder="Your name" required>
</div>
<div class="email-form">
<label for="email">Your Email</label>
<input id="email" type="email" placeholder="Your email" required>
</div>
<div class="contact__txtarea">
<label for="text">Message</label>
<textarea class="textarea" id="text" maxlength="500" placeholder="Your message here..." required></textarea>
</div>
<div>
<input class="contact-section__btn" type="submit" value="Send Message" required>
</div>
</form>
</section>
<section class="addresses">
<div class="addresses__info1">
<p>Finds us on:</p>
<img src="img/you.svg" alt="Youtube">
<img src="img/insta.svg" alt="Instagram">
<img src="img/face.svg" alt="Facebook">
<p>Email us at: <a href="mailto:questions@countryofcol.com">questions@countryofcol.com</a><br> Call us at: <a href="tel:+57 118-647-0023">+57 118-647-0023</a><br></p>
</div>
<div class="addresses__info2">
<p>Calle Maria 63 Oficina 702<br> Medellin 4665684<br> Colombia
<br></p>
<p>Tuesday-Saturday<br> 9AM - 6PM COT<br></p>
</div>
<footer class="main_footer">
<ul class="footer_lists">
<li class="footer_links"><a href="terms.html">Terms</a></li>
<li class="footer_links"><a href="privacy.html">Privacy Policy</a></li>
</ul>
</footer>
</section>
<!--</section>-->
</main>
</body>
</html>
所以首先你在做一个 html 结构错误。您正在尝试将 footer 设置为 main，但它应该不存在。
Body 结构应该是这样的：
<body>
<header></header>
<main></main>
<footer></footer>
</body>
那么你在 contact-section 中设置 height: 77vh; 尝试设置 min-heigth: 77vh; 以使其更灵活。
如果您想删除页脚上的白色条带，只需删除 footer 中的 margin-top。但是，如果您所有的橙色部分都是页脚，那么您应该将其全部设置在页脚中，而不是将其分隔在 section 和 footer
演示
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
}
#flex-container {
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Heebo', sans-serif;
}
.contact-section {
text-align: center;
width: 100%;
min-height: 77vh; /* Replaced from height to min-height */
background: linear-gradient( rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(img/colo.png);
/* background-size: center; */
background-position: center;
color: white;
margin-top: 2.5rem;
padding: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contact-section__text {
font-weight: 700;
font-size: x-large;
}
label {
display: none;
}
.contact input,
.contact textarea {
margin: .5rem;
font-weight: 1000;
}
.contact textarea {
margin-right: 1.25rem;
}
.contact-section__btn {
padding: 12px 26px;
border-radius: 7px;
background: rgb(201, 83, 5);
border: none;
color: white;
font-size: 1.05rem;
}
.contact-section__btn:hover,
.contact-section__btn:focus {
background-color: white;
color: rgb(201, 83, 5);
cursor: pointer;
}
input[type="text"], [type="email"], textarea {
background-color: rgb(247, 204, 175);
border-color: rgb(201, 83, 5);
width: 400px;
height: 35px;
margin-right: 1.45rem;
}
.contact__txtarea label,
.textarea {
width: 400px;
height: 200px;
vertical-align: top;
}
.email-form {
margin-right: .80rem;
}
.addresses {
/* background-color: rgb(99, 99, 99); */
background-color:rgb(201, 83, 5);
color: white;
/* margin-top: 2rem; */
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
/* padding-inline-start: 0; */
justify-content: space-evenly;
}
.addresses__info1 {
flex-direction: column;
}
.addresses__info2 {
flex-direction: column;
}
.main_footer {
/* background-color:rgb(99, 99, 99); */
background-color:rgb(201, 83, 5);
/*margin-top: 3.5rem;*/
flex-direction: column;
}
.footer_links { /*li*/
margin: 0;
}
.footer_lists { /*ul*/
list-style: none;
margin: 0;
text-align: center;
padding-inline-start: 0;
}
.footer_links a { /*li a*/
color:white;
text-decoration: none;
font-size: 1.1rem;
}
.footer_links :hover {
text-decoration-line: underline;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact | Feel free to email or call Us!</title>
<link rel="stylesheet" type="text/css" href="contact.css">
<link rel="stylesheet" type="text/css" href="contact_nav_ft.css">
<link href="img/colo.icon .png" rel="shortcut icon" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul class="nav_list">
<li ></li>
<li class="nav_lists" style="float:right;"><a href="Colombia.html">Our Purpose</a></li>
<li class="nav_lists"><a href="Colombian-cities.html">Cities</a></li>
<li class="nav_lists"><a href="contact.html">Contact</a></li>
<li class="nav_lists"><a href="services.html">Our Services</a></li>
</ul>
</nav>
<main id="flex-container">
<section class="contact-section">
<div class="contact-section__text">
<p>
Shoot us an email or Give us a call!<br>
We are always happy to answer any questions you may have!<br>
</p>
</div>
<form action="" method="POST" class="contact">
<div>
<label for="name">Your Name</label>
<input id="name" type="text" placeholder="Your name" required>
</div>
<div class="email-form">
<label for="email">Your Email</label>
<input id="email" type="email" placeholder="Your email" required>
</div>
<div class="contact__txtarea">
<label for="text">Message</label>
<textarea class="textarea" id="text" maxlength="500" placeholder="Your message here..." required></textarea>
</div>
<div>
<input class="contact-section__btn" type="submit" value="Send Message" required>
</div>
</form>
</section>
<section class="addresses">
<div class="addresses__info1">
<p>Finds us on:</p>
<img src="img/you.svg" alt="Youtube">
<img src="img/insta.svg" alt="Instagram">
<img src="img/face.svg" alt="Facebook">
<p>Email us at: <a href="mailto:questions@countryofcol.com">questions@countryofcol.com</a><br>
Call us at: <a href="tel:+57 118-647-0023">+57 118-647-0023</a><br></p>
</div>
<div class="addresses__info2">
<p>Calle Maria 63 Oficina 702<br>
Medellin 4665684<br>
Colombia<br></p>
<p>Tuesday-Saturday<br>
9AM - 6PM COT<br></p>
</div>
</section>
<!--</section>-->
</main>
<footer class="main_footer">
<ul class="footer_lists">
<li class="footer_links"><a href="terms.html">Terms</a></li>
<li class="footer_links"><a href="privacy.html">Privacy Policy</a></li>
</ul>
</footer>
</body>
</html>
带 1 个页脚的演示
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
}
#flex-container {
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Heebo', sans-serif;
}
.contact-section {
text-align: center;
width: 100%;
min-height: 77vh; /* Replaced from height to min-height */
background: linear-gradient( rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(img/colo.png);
/* background-size: center; */
background-position: center;
color: white;
margin-top: 2.5rem;
padding: 4rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contact-section__text {
font-weight: 700;
font-size: x-large;
}
label {
display: none;
}
.contact input,
.contact textarea {
margin: .5rem;
font-weight: 1000;
}
.contact textarea {
margin-right: 1.25rem;
}
.contact-section__btn {
padding: 12px 26px;
border-radius: 7px;
background: rgb(201, 83, 5);
border: none;
color: white;
font-size: 1.05rem;
}
.contact-section__btn:hover,
.contact-section__btn:focus {
background-color: white;
color: rgb(201, 83, 5);
cursor: pointer;
}
input[type="text"], [type="email"], textarea {
background-color: rgb(247, 204, 175);
border-color: rgb(201, 83, 5);
width: 400px;
height: 35px;
margin-right: 1.45rem;
}
.contact__txtarea label,
.textarea {
width: 400px;
height: 200px;
vertical-align: top;
}
.email-form {
margin-right: .80rem;
}
.addresses {
/* background-color: rgb(99, 99, 99); */
background-color:rgb(201, 83, 5);
color: white;
/* margin-top: 2rem; */
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
/* padding-inline-start: 0; */
justify-content: space-evenly;
}
.addresses__info1 {
flex-direction: column;
}
.addresses__info2 {
flex-direction: column;
}
.main_footer {
/* background-color:rgb(99, 99, 99); */
background-color:rgb(201, 83, 5);
/*margin-top: 3.5rem;*/
flex-direction: column;
}
.footer_links { /*li*/
margin: 0;
}
.footer_lists { /*ul*/
list-style: none;
margin: 0;
text-align: center;
padding-inline-start: 0;
}
.footer_links a { /*li a*/
color:white;
text-decoration: none;
font-size: 1.1rem;
}
.footer_links :hover {
text-decoration-line: underline;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact | Feel free to email or call Us!</title>
<link rel="stylesheet" type="text/css" href="contact.css">
<link rel="stylesheet" type="text/css" href="contact_nav_ft.css">
<link href="img/colo.icon .png" rel="shortcut icon" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul class="nav_list">
<li ></li>
<li class="nav_lists" style="float:right;"><a href="Colombia.html">Our Purpose</a></li>
<li class="nav_lists"><a href="Colombian-cities.html">Cities</a></li>
<li class="nav_lists"><a href="contact.html">Contact</a></li>
<li class="nav_lists"><a href="services.html">Our Services</a></li>
</ul>
</nav>
<main id="flex-container">
<section class="contact-section">
<div class="contact-section__text">
<p>
Shoot us an email or Give us a call!<br>
We are always happy to answer any questions you may have!<br>
</p>
</div>
<form action="" method="POST" class="contact">
<div>
<label for="name">Your Name</label>
<input id="name" type="text" placeholder="Your name" required>
</div>
<div class="email-form">
<label for="email">Your Email</label>
<input id="email" type="email" placeholder="Your email" required>
</div>
<div class="contact__txtarea">
<label for="text">Message</label>
<textarea class="textarea" id="text" maxlength="500" placeholder="Your message here..." required></textarea>
</div>
<div>
<input class="contact-section__btn" type="submit" value="Send Message" required>
</div>
</form>
</section>
<!--</section>-->
</main>
<footer class="main_footer">
<div class="addresses">
<div class="addresses__info1">
<p>Finds us on:</p>
<img src="img/you.svg" alt="Youtube">
<img src="img/insta.svg" alt="Instagram">
<img src="img/face.svg" alt="Facebook">
<p>Email us at: <a href="mailto:questions@countryofcol.com">questions@countryofcol.com</a><br>
Call us at: <a href="tel:+57 118-647-0023">+57 118-647-0023</a><br></p>
</div>
<div class="addresses__info2">
<p>Calle Maria 63 Oficina 702<br>
Medellin 4665684<br>
Colombia<br></p>
<p>Tuesday-Saturday<br>
9AM - 6PM COT<br></p>
</div>
</div>
<ul class="footer_lists">
<li class="footer_links"><a href="terms.html">Terms</a></li>
<li class="footer_links"><a href="privacy.html">Privacy Policy</a></li>
</ul>
</footer>
</body>
</html>