如何让此页脚与 textarea 对齐？ Flexbox 似乎没有这样做
Posted
技术标签:
【中文标题】如何让此页脚与 textarea 对齐？ Flexbox 似乎没有这样做【英文标题】：How do I get this footer to line up with the textarea? Flexbox doesn't seem to do it 【发布时间】：2021-02-06 04:23:14 【问题描述】：我希望底部的文本居中并与文本框对齐。如果我添加边距，它只适用于我当前的屏幕尺寸，但是当我将页面拖动到另一个尺寸的显示器时，间距会变得混乱。如何以文本区域居中此页面的底部？这是我的代码：
*
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" >
<img src="img/insta.svg" >
<img src="img/face.svg" >
<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>【问题讨论】：
【参考方案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%;
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" >
<img src="img/insta.svg" >
<img src="img/face.svg" >
<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>【讨论】：
成功了！你到底做了什么改变了它？ 我在页脚中定义了每个部分的大小，并让它随着 flex 增长。查看地址项的更改【参考方案2】：所以首先你正在做一个 html 结构错误。您正在尝试将 footer 设置为 main，但它应该已退出。
身体结构应该是这样的：
<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" >
<img src="img/insta.svg" >
<img src="img/face.svg" >
<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" >
<img src="img/insta.svg" >
<img src="img/face.svg" >
<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>【讨论】：
对，我试图从其他页面回收页脚代码，却没有意识到我会使用更多。这个最小高度有什么作用？min-height 实际上是在固定容器的最小高度。但是这个容器将伸展以包含其所有内容。所以所有其他元素都将被下推。因为也许您没有看到，但在您验证的答案中，在其演示中，表单位于下面的部分（页脚）后面......所以在根本不工作的移动设备上......以上是关于如何让此页脚与 textarea 对齐？ Flexbox 似乎没有这样做的主要内容，如果未能解决你的问题，请参考以下文章
如何将网页底部的页脚与 tailwind 和 Next.js 对齐
s-s-rS：如何将表格页脚与最后一组的最后一个细节保持在一起？